Jquery form validation on click

Question

I have a form with multiple inputs and I need to validate them on a button click.
The problem I'm having is if there is more than one required field it seems call to valid() validates only the first. Other fields are omitted.

$(function() {
  //simple example 1
  //click event for first button 
  $('#btn').click(function() {
    $("#form1").valid(); //validate form 1
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<form id="form1" name="form1">
  Field 1: <input id="field1" type="text" class="required" />
  <br/>Field 2: <input id="field2" type="text" class="required" />
  <div>
    <input id="btn" type="button" value="Validate" />
  </div>
</form>

Associated jsfiddle here

score 0 · Accepted Answer · edited Jun 02 '22 at 10:47

0

I tried it with the missing name fields and it works fine.

<form id="form1" name="form1">
    Field 1: <input id="field1" type="text" name="field1" class="required" />
      
    <br/>

    Field 2: <input id="field2" type="text" name="field2" class="required" />

    <input id="btn" type="button" value="Validate" />

</form>

edited Jun 02 '22 at 10:47

Nam G VU

33,193
69
233
372

answered Mar 12 '18 at 16:35

Stephen Flynn

105
9

Thanks, adding the name fields fixed the problem. Many thanks – Sajith Silva Mar 12 '18 at 16:40

score -1 · Answer 2 · answered Mar 12 '18 at 16:58

-1

Add input for all fields presents on form

 $("#form1 input").valid();

answered Mar 12 '18 at 16:58

ceurif

16
3

Jquery form validation on click

2 Answers2