Validating multiple forms on the same page

前端 未结 6 382
面向向阳花
面向向阳花 2021-01-14 03:03

For example I have 3 forms in a page with the same names. How can I validate all these forms with one validate method?

相关标签:
6条回答
  • 2021-01-14 03:13

    Here is the Solution to Validate Multiple Forms on a Single 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>
    

    It is working for me. I wrote this code for 5 Forms in a single Page.

    0 讨论(0)
  • 2021-01-14 03:19

    When you need to apply the same .validate() method to multiple forms, you simply need a jQuery .each() and you can target them all at once by the form tag.

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


    Quote OP:

    "I also find I can't add different IDs because these forms are in a PHP loop and it must have same ID."

    Then your PHP loop is not constructed properly. Every id on a page must be unique or the HTML markup is invalid. You can simply use class instead of id. Otherwise, if there are no other <form> elements on the page, you can target them all with $('form') as done in the demo above.

    0 讨论(0)
  • 2021-01-14 03:26

    Just insert below code on your page & use as many forms you want.

    <script type="text/javascript">
            $(document).ready(function () {
    
                $('form').each(function () {
                    $(this).validate({
                        // your options
                    });
                });
    
            });
        </script>

    0 讨论(0)
  • 2021-01-14 03:35

    I've created fiddlefor you. Add ids if you really need them.

    Key is to add same class to forms and validate each form.

    $('form.validateForm').each(function(key, form) {
        $(form).validate(); 
    });
    
    0 讨论(0)
  • 2021-01-14 03:35
    <!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 讨论(0)
  • 2021-01-14 03:35

    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 讨论(0)
提交回复
热议问题