Validating Bootstrap form with jQuery

Question

I have a Bootstrap form and I am basically trying to loop through all input fields, check if they have a required class and their value is null, if so add some CSS as an error indicator. For some reason the if statement is not working.

My code is:

$("#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 is along these lines, but longer, same structure though, the form-group div is repeated:

<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>

@ Hi JSamarjiev, why do you not try - JS Validator for form validation. Check out this link:: 1000hz.github.io/bootstrap-validator — Sayed Rafeeq
– Sayed Rafeeq, Commented Jun 15, 2016 at 9:53

Guruprasad J Rao · Accepted Answer · 2016-06-15 10:04:39Z

1

Your code threw error when you say formInputFields[i].hasClass because formInputFields was a jquery object but not formInputFields[i]. Since you were using $.each, the 2nd parameter would have given you current element and instead of formInputFields[i], you could just use that 2nd parameter. Also, when you say cur.val()==="null" it will be strong comparison between left and right i.e. both should match by value and type which always failed here. So just check the length of val and if it is 0 that will be invalid element. Below are the changes I've made. Check and it and let me know if you face any issues.

$("#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>

answered Jun 15, 2016 at 10:04

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JSamarjiev Over a year ago

Just out of curiosity, what is the thinking behind cur syntactically?

Guruprasad J Rao Over a year ago

I would expand it as current... :)

Community · Accepted Answer · 2017-05-23 12:08:28Z

0

Firstly, when an input is required add required as an attribute rather than a class.

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

Then you will be able to get any required inputs currently missing values using:

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

or if you must use jquery like so.

The same selector works in css too:

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 15, 2016 at 9:54

atomless

1,28215 silver badges18 bronze badges

Comments

ThonyRG · Accepted Answer · 2016-06-15 10:26:04Z

0

you can use $(this) instead of formInputFields[i].hasClass... as you need the object to verify if it has the "required" class or not and if it has value or not, for example:

$(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

answered Jun 15, 2016 at 10:26

ThonyRG

264 bronze badges

Collectives™ on Stack Overflow

Validating Bootstrap form with jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related