0

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

Edited by mattyd

3
Contributors
2
Replies
21
Views
2 Years
Discussion Span
Last Post by joshuajames.delacruz
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.