How to validate the form using jquery/javascript? [duplicate]

Question

I have a normal form which looks like this:

<form id="selectionForm" class="form-horizontal">
   <div>
      <div class="form-group row">
         <div class="col-md-4 form-group">
            <label  for="selectionDate">Selection
            Date</label>
            <input type="text" id="selectionDate" name="selectionDate" class="nepali-calendar ndp-nepali-calendar form-control" onfocus="showNdpCalendarBox('selectionDate')" required > 
            <div style="margin: 10px;"></div>
         </div>
         <div class="col-md-4 form-group">
            <label class="col-md-12" for="selectedBy">Selected By</label> <label
               class="col-md-6"> <input style="margin: 10px;"
               type="radio" name="selectedBy" value="Department" required />Department
            </label> 
            <label class="col-md-6">
               <input style="margin: 10px;"
                  type="radio" name="selectedBy" value="Office"  required />Office
               <div style="margin: 10px;"></div>
            </label>
         </div>
         <div class="form-group col-md-4">
            <label for="panEximNumber">PAN/EXIM Number</label> <input
               type="text" id="panEximNumber" class="form-control"
               name="eximPanNo" placeholder="Enter the PanEximNumber" pattern=".{9,10}" title="Characters must be only 9 characters" required >
         </div>
      </div>
      <div class="form-group row">
         <div class="form-group col-md-4">
            <label for="paneximnepali">PAN/EXIM Name(Nepali)</label> <font
               face="pcs"> <input type="text" id="panEximNameNepali"
               class="form-control" name="eximPanName"
               placeholder="Enter the name" required></font>
         </div>
         <div class="form-group col-md-4">
            <label for="paneximeng">PAN/EXIM Name(English)</label> <input
               type="text" id="paneximEnglish" class="form-control"
               name="eximPanNameEng"
               placeholder="Enter the Pan Exim Name(English)" required>
         </div>
         <div class="form-group col-md-4">
            <label for="age">Exim/Pan Address(Nepali)</label> <font
               face="pcs"> <input type="text" id="address"
               class="form-control" name="eximPanAddr"
               placeholder="Enter the address" required>
            </font>
         </div>
      </div>
      <!--row 3-->
      <div class="form-group row">
         <div class="form-group col-md-4">
            <label for="age">Exim/Pan Address(English)</label> <input
               type="text" id="address" class="form-control"
               name="eximPanAddrEng" placeholder="Enter the address(English)" required>
         </div>
         <div class="form-group col-md-4">
            <label for="age">Exim/Pan Phone Number</label> <input type="text"
               id="phoneNumber" class="form-control" name="eximPanPhone"
               placeholder="Enter the Phone number" required>
         </div>
         <div class="form-group col-md-4">
            <label for="selectionType">Selection Type</label> 
            <select
               class="form-control" id="selectionType" name="selectionType" required>
               <option value="" selected disabled hidden>Choose here</option>
               <option value="firm">Firm</option>
               <option value="consignment">Consignment</option>
               <option value="product">Product</option>
            </select>
         </div>
      </div>
      <!--row 4-->
      <div class="form-group row">
         <div class="form-group col-md-4 consNo" id="consNo">
            <label for="consignentNo">Consignment No</label> <input
               type="text" id="consignentNo" class="form-control"
               placeholder="Enter the consignment No" name="consignmentNo" />
         </div>
         <div class="form-group col-md-4 consDate">
            <label for="consignentDate">Consignment Date</label> <input
               type="text" id="consignentDate"
               class="nepali-calendar ndp-nepali-calendar form-control"
               onfocus="showNdpCalendarBox('consignentDate')"
               name="consignmentDate" placeholder="Enter the consignment date" />
         </div>
         <div class="form-group col-md-4 prodName">
            <label for="selectionProductName">Product Name</label> <input
               type="text" id="productName" class="form-control"
               name="productName" placeholder="Enter the product Name" />
         </div>
      </div>
     <button type="submit" style="margin-bottom: 50px;"
                  class="btn btn-success pull-right" onclick="submitSelection();">Submit</button>
   </div>
</form>

My button to go to the submit action is :

I have added the required field and also other html5 validation properties. When the Submit button is clicked the form submission method is clicked.So,I tried the following to validate but it is not working.

<button type="submit" style="margin-bottom: 50px;"
   class="btn btn-success pull-right" onclick="submitSelection();">Submit</button>

And the code to perform the submit operation is:

function submitSelection() {
            document.selectionForm.submit(); 

             event.preventDefault(); 
              $.ajax({
                            //ajax code to submit operation
                    }); 

                }

I tried to tigger the validation operation by document.selectionForm.submit(); but it is not working.I need to validate my form before submitting through AJAX.How to validate the form?

BadPiggie · Accepted Answer · 2019-01-14 05:06:04Z

1

The best way is something like this,

Add function in onSubmit event handler. Then only it will submit when you hit enter.

<form onsubmit='return validateMyform()'>

Then Implement your validation function validateMyform().

<script>

 function validateMyform(){

 // your implementation
 var isValid = true;

 //make your validation something like
 if($("#panEximNameNepali").value.length < 6){
   isValid = false;
 }

 if($("#selectionType").value == ""){
   isValid = false;
 }


if(isValid == true){

  submitSelection();

}else{

  // show error message.

}

return false;

}

</script>

Here return false; is important. If you didn't put return false; the form will submit directly.

Then implement your AJAX submit function submitSelection()

edited Jan 14, 2019 at 5:06

answered Jan 14, 2019 at 4:57

BadPiggie

6,4391 gold badge17 silver badges37 bronze badges

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

3 Comments

ashwin karki Over a year ago

what is this yourValidation ? how can i initialize it?

ashwin karki Over a year ago

can you please illistrate me more clearly? i didn't ge the whole point

BadPiggie Over a year ago

I updated my answer, I can only give you a idea. Can't write whole code

Praveen Kumar Tripathi · Accepted Answer · 2019-01-14 05:08:38Z

try this one you can add multi input type with html5 attr.

<form action="" method="POST">
      <p>
        E-mail:
        <input data-validation="email" data-validation-error-msg="You did not enter a valid e-mail">
      </p>
      <p>
        Password:
        <input type="password" data-validation="required" 
       data-validation-error-msg="You did not enter a password">
      </p>
      <p>
        <input type="submit" value="Login">
      </p>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
    <script>
    $.validate({
      validateOnBlur : false, // disable validation when input looses focus
      errorMessagePosition : 'top', // Instead of 'inline' which is default
      scrollToTopOnError : false // Set this property to true on longer forms
    });
    </script>

Collectives™ on Stack Overflow

How to validate the form using jquery/javascript? [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related