Bootstrap | JQuery: How to enable "Required" validation on fields during Form Submit Click?

Question

Following is JS Code:

$('#createCust').on('click', function(e) {
            e.preventDefault();
            documentCommon.ajax({
                dataType : 'text',
                url : "/createcustomer",
                data : $("body form:first").serialize(),
                success : function(data) {
                    $(".dialogTitle").html("");
                    $(".dialogTitle").html("Add Customer");
                    $(".actualData").html("");
                    $(".actualData").html(data);
                    $('#modalViewDialog').modal('show');
                }
            });
        });

Following is button:

<form:form method="POST" modelAttribute="customerForm"
        class="form-signin" action="/createcustomer">
  <form:input type="text" path="customerName" class="form-control"
                                placeholder="Customer Name" required="required"></form:input>
  <button type="submit" id="createCust" class="btn btn-primary">Create</button>

When i remove JS code then it works fine but i want ajax call so i could not rely on whole page submit. Is there any way to enabled all required field check on JS call too?

Answer 1

Alternative way to achieve above is to check if the inputs are not empty using != "" and depending on this make your ajax call or show error .

Here is an example if you know the name of inputs and want to check each input manually.

Demo Code :

$('#createCust').on('click', function(e) {
  e.preventDefault();
  //check if customer not empty
  if ($("input[name='customerName']").val() != "") {
    console.log("go to backend")
    /*your ajax call*/

  } else {
    //do something to show error
    console.log("please fill above")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" modelAttribute="customerForm" class="form-signin" action="/createcustomer">
  <input type="text" path="customerName" name="customerName" class="form-control" placeholder="Customer Name">
  <button type="submit" id="createCust" class="btn btn-primary">Create</button>
</form>

If you have large form then you can just loop through all inputs inside form and check if val() is not empty depending on this call your ajax or show errors .Modify below code according to your requirements.

Demo code :

$('#createCust').on('click', function(e) {
  e.preventDefault();
  var count =0
  var validate_ = true;
  var inputs_=$(".form-signin > input").length;
  //loop through form inputs
  $(".form-signin > input").each(function() {
    if ($(this).val() != "") {
    count++;
      validate_ = true; //not null
    } else {
    count--;
      validate_ = false;
    }
  })
  console.log(inputs_ == count)
  //check validate status
  if (validate_ && inputs_ == count) {
    console.log("go to backend")
    /*your ajax call*/

  } else {
    //do something to show error
    console.log("please fill above")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" modelAttribute="customerForm" class="form-signin" action="/createcustomer">
  <input type="text" path="customerName" name="customerName" class="form-control" placeholder="Customer Name"><br/>
  <input type="text" path="customerName" name="soemthing" class="form-control" placeholder="somthing"><br/>
  <input type="text" path="customerName" name="somthing" class="form-control" placeholder="somthing"><br/>
  <button type="submit" id="createCust" class="btn btn-primary">Create</button><br/>
</form>