Checking multiple forms on one page

Question

Checking multiple forms on one page

For example, I have 3 forms on the same page with the same name. How can I validate all of these forms with a single validation method?

<form id="formID">
<input name="nick">
<input type="submit">
</form>

<form id="formID">
<input name="nick">
<input type="submit">
</form>

<form id="formID">
<input name="nick">
<input type="submit">
</form>

I want to confirm only the submitted form, not all at the same time.

$('#formID').validate({
})

My solution does not work. I also found that I could not add different identifiers, because these forms are in the PHP loop and must have the same identifier.

+4

jquery jquery-validate

Wizard May 29 '14 at 19:22

source share

6 answers

.validate() , jQuery .each(), form.

$('form').each(function() {   // <- selects every <form> on page
    $(this).validate({        // <- initialize validate() on each form
        // your options       // <- set your options inside
    });
});

DEMO: http://jsfiddle.net/K6Tkn/

OP:

" , , PHP ".

PHP . id HTML- . class id. , <form>, $('form'), .

+14

Sparky 29 '14 19:56

I created a fiddle for you. Add identifiers if you really need them.

The key is to add the same class to the forms and check each form.

$('form.validateForm').each(function(key, form) {
    $(form).validate(); 
});

+4

Janne savolainen May 29 '14 at 19:37

source share

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<link href="<c:url value="/resources/js/bootstrap/3.3.7/css/bootstrap.min.css"/>" rel="stylesheet" />
<script src="<c:url value="/resources/js/bootstrap/jquery/1.9.1/jquery-1.9.1.min.js"/>"></script>
<script src="<c:url value="/resources/js/jquery_validation/jquery.validate.min.js"/>"></script>
<script src="<c:url value="/resources/js/bootstrap/3.3.7/js/bootstrap.min.js"/>"></script>
<style>
.error {
    color: red;
    font-size: 0.8em;
}

body {
    margin: 30px;
}
</style>
</head>
<body>

    <form id="formA">
        <input type="text" name="username" />
        <input type="submit" value="submit" />
    </form>

    <form id="formB">
        <input type="text" name="email" />
        <input type="submit" value="submit" />
    </form>

</body>

<script>
    $(document).ready(function() {
        $('#formA').validate({
            rules:{
                username:{
                    required:true,

                }
            }, 
            submitHandler:function(event){
                alert('prevent default');
                alert('submit handler for formA')
            }
        });
        $('#formB').validate({
            rules:{
                email:{
                    required:true,
                    email:true
                }
            }, 
            submitHandler:function(event){
                alert('prevent default');
                alert('submit handler for formB')
            }
        });
    });
</script>


</html>

0

Sandy Apr 21 '17 at 14:22

source share

inspired by the answer of @Irshad Khan ,hope it may help others.
Apply data-rule-required="true" to required html inputs then in jquery

$('form').submit(function (e) {
        e.preventDefault();
        var clikedForm = $(this);
        if (clikedForm.valid()) {
            alert('valid');
        } else {
            alert('not_valid');
        }
    });

0

Hassan tahir May 13, '17 at 12:18

source share

Just paste the code below into your page and use as many forms as possible.

<script type="text/javascript">
        $(document).ready(function () {

            $('form').each(function () {
                $(this).validate({
                    // your options
                });
            });

        });
    </script>

Run code Hide result

0

Devsainii Feb 21 '18 at 11:11

source share

Irshad khan · Accepted Answer · 2016-02-15T05:47:30+0000

Here is a solution for checking multiple forms on one page:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("form").submit(function () {

      var clikedForm = $(this); // Select Form

      if (clikedForm.find("[name='mobile_no']").val() == '') {
        alert('Enter Valid mobile number');
        return false;
      }
      if (clikedForm.find("[name='email_id']").val() == '') {
        alert('Enter  valid email id');
        return false;
      }

    });
  });
</script>

He works for me. I wrote this code for 5 forms in one page.

Checking multiple forms on one page

More articles: