Hello,

I am experimenting with implementing jQuery to validate my form (I hired a programmer one year ago to do this but it seems she made a mess of it so I am attempting to rebuild it.)

I have multiple fields in my form and I wish many of them to be required and the form unable to be submitted until they are filled out.

This morning I added a script that seems to work. At this experimental stage I have only added an email field, but I will soon add many more fields.

My primary question is: How do I control the submit button from being fired when dealing with multiple fields? In the code, below, you will see the script in the head that controls only the email at this point. I do not at all think I should rewrite that for each field, correct? Can I just seperate the field names by commas to get it to see to each field?

Please see code below:

`

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>

<!--Button disable script-->
<script>
    $(document).ready(function(){  

      var checkField;

      //checking the length of the value of message and assigning to a variable(checkField) on load
      checkField = $("input#Email").val().length;  

      var enableDisableButton = function(){         
        if(checkField > 0){
          $('#Submit').removeAttr("disabled");
        } 
        else {
          $('#Submit').attr("disabled","disabled");
        }
      }        

      //calling enableDisableButton() function on load
      enableDisableButton();            

      $('input#Email').keyup(function(){ 
        //checking the length of the value of message and assigning to the variable(checkField) on keyup
        checkField = $("input#Email").val().length;
        //calling enableDisableButton() function on keyup
        enableDisableButton();
      });
    });
    </script>
 <!--Button disable script-->   

    <style>
    .container{
                      margin:0px  auto;
                      background:#eee;
                      width:60%;
                      }
                        .form-area{
                        padding:1%;
                        border:1px solid #000;
                        margin:0px auto;
                        width:70%;
                                            }
                          .form-element{
                          margin-bottom:10px;
                          padding:10px;
                                                         }
                          .form-element{
                          padding:10px;
                          width:70%;
                                                   }
                           #Submit{
                           padding:10px;
                           background:#900;
                           color:#fff;
                           border-width:0px;
                           margin-left:2%;
                                         }

                            .error {
                            font-weight:bold;
                            color:#F00;


                            }

    </style>
</head>
<body>
        <div class = 'container'>
            <div class = 'form-area'>
                <form method = 'post' action = 'jTest1.0.html' id = 'DemoForm' name = 'DemoForm'>
                    <div class = 'form-element'>
                        <input type = 'text' name = 'Email'  id = 'Email' placeholder = 'Enter Your Email' />
                        <label id = "Email-error" class = "error" for = "email"></label><br/>
                    </div>
                    <input type = 'submit' name = 'Submit'  id = 'Submit' value = 'Submit Form' />

                </form>
            </div>
        </div>


      <script src = 'jquery.validate.min.js'></script>

      <script>
        $('#DemoForm').validate ({
            rules: {
                            'Email': {
                                            required:'true',
                                            email: 'true',
                                        }
                      },
                      messages:{
                            'Email':{
                            required:'Please submit your email.',
                            email:'Enter a valid email.',
                                        }
                                       },


                                                  });
      </script>

</body>

</html>

`

Thank you in advance!
Matthew

Hi,

You could try using first() and nextAll() and have the same class for your different fields.

For example

checkField = $(".class").first().nextAll().val().length;

see JQuery documentation below for more information:

https://api.jquery.com/first/
https://api.jquery.com/nextAll/

commented: Thank you. +8

another answer to this question is the required command in HTML5

use this reference Click Here

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.