Проверка формы бутстрапа с помощью jQuery

Question

У меня есть форма Bootstrap, и я в основном пытаюсь перебрать все поля ввода, проверьте, есть ли у них класс required, и их значение равно null, если так добавить CSS как индикатор ошибки. По какой-то причине заявление if не работает.

Мой код:

$("#orderForm").on("submit", function(e) { 
var formInputFields = $(".form-control") 
formInputFields.each(function(i) { 
    if (formInputFields[i].hasClass("required") && formInputFields[i].val() === "null") { 
    e.preventDefault(); 
    formInputFields.css("border", "2px solid #741e4f"); 
    } 
}); 

});

HTML вдоль этих линий, но больше, та же самая структура, хотя, form-group ДИВ повторяется:

<form class="form-horizontal" id="orderForm"> 
      <div class="form-group"> 
       <label for="" class="col-sm-4 control-label">Lorem</label> 
       <div class="col-sm-6"> 
       <select name="" id="" class="form-control required"> 
        <option value=""></option> 
        <option value="lorem">lorem</option> 
        <option value="ipsun">ipsun</option> 
       </select> 
       </div> 
      </div> 

Answer 1

Ваш код бросил ошибку, когда вы говорите, потому что formInputFields[i].hasClassformInputFields был jquery object но не formInputFields[i]. Поскольку вы использовали $.each, второй параметр дал бы вам текущий элемент, а вместо formInputFields[i] вы могли бы просто использовать этот 2-й параметр. Кроме того, когда вы скажете cur.val()==="null", будет сильное сравнение между левым и правым, то есть оба должны совпадать с value и type, которые всегда здесь не удавались. Так что просто проверьте length от val и если это 0, который будет invalid element. Ниже приведены изменения, которые я сделал. Проверьте, и дайте мне знать, если вы столкнетесь с какими-либо проблемами.

$("#orderForm").on("submit", function(e) { 
 
    var formInputFields = $(".form-control") 
 
    formInputFields.each(function(i, v) { 
 
    var cur = $(v); 
 
    if (cur.hasClass("required") && !(cur.val().length)) { 
 
     e.preventDefault(); 
 
     cur.css("border", "2px solid #741e4f"); 
 
    } 
 
    else 
 
     cur.css("border", ""); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form class="form-horizontal" id="orderForm"> 
 
    <div class="form-group"> 
 
    <label for="" class="col-sm-4 control-label">Lorem</label> 
 
    <div class="col-sm-6"> 
 
     <select name="" id="" class="form-control required"> 
 
     <option value=""></option> 
 
     <option value="lorem">lorem</option> 
 
     <option value="ipsun">ipsun</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <input class="btn btn-info" type="submit" value="Submit" /> 
 
</form>

Answer 2

Во-первых, когда требуется вход добавить required as an attribute, а не класс.

<input type="text" id="foo" placeholder="bar" value="" required>

Тогда вы будете иметь возможность получить все необходимые материалы в настоящее время отсутствующие значения с помощью:

var list_of_invalid_inputs = document.querySelectorAll('*:invalid');

или если вы должны использовать JQuery like so.

То же селектор работает в CSS тоже:

input:invalid { border: 2px solid #741e4f; }

Answer 3

вы можете использовать $ (это) вместо formInputFields [я] .hasClass ... как вам нужно, чтобы объект, чтобы проверить, если он имеет "необходимый" класс или нет, и если он имеет значение или нет, например:

$(document).ready(function(){ 
    $("#orderForm").on("submit", function(e){ 
     var formInputFields = $(".form-control"); 
    formInputFields.each(function(i) { 
     if($(this).hasClass("required") && $.trim($(this).val()) === ""){ 
     e.preventDefault(); 
      $(this).css("border", "2px solid #741e4f"); 
     } 
    }); 
    return false; 
    }); 
}); 

JSFiddle