Dynamic validation of forms javascript

Question

I have this form

<form name="myForm" action="" method="post" onsubmit="return validations(this)"  >


        <span>
            <label>Enter Your First Name</label><input id="name" name= "field[1]" type="text" class="element text" maxlength="255" size="8" value=""/>
        </span>
        <br /><br />
        <span>
            <label>Enter Your Last Name</label><input id="last" name= "field[2]" type="text" class="element text" maxlength="255" size="8" value=""/>

        </span> 
        <br />
        <br />

        <span>
            <input id="field[3]" name="field[3]" class="element radio" type="radio" value="1" />
<.label class="choice" for="field[3]">Male</label>
<input id="field[4]" name="field[4]" class="element radio" type="radio" value="2" />
<label class="choice" for="field[4]">Female</label>

        </span> 
        <br /><br />
        <label class="description" for="field[5]">Enter your city </label><input id="field[5]" name="element_3" type="text" class="element text medium" type="text" maxlength="255" value=""/> 

        <br /><br />
        <span>
            <input id="field[5]" name="field[5]" class="element checkbox" type="checkbox" value="1" />
<.label class="choice" for="field[5]">I am unemployed.</label>
<br /><br />

        </span> 

                <input type="hidden" name="form_id" value="form1" />
</div>              
.               
<.input type="submit" value="Validate" >



        </form> 

and i want to validate the form on click "Validate". to check if all fields type=text are completed.How can i do this dynamically?

Answer 1

You can do it using

1. Plain JavaScript checks, write a function and validate each field on clicking of submit button
2. jQuery validation plugin if you are using jQuery. Include the jQuery and jQuery validation plugin in your html page, add class="required" to your text fields and finally add a JavaScript code to attach validation.

The second is simple as it only need to call validate function and set class="required" for your text fields

ex:

Including jQuery and validation plugin in your html head tag

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>

to attach validation to your form, add this code in head section or anywhere in body

<script type="text/javascript">
jQuery(document).ready(function($){
  $('form[name="myForm"]').validate();
});
</script>

Now your form fields:

<form name="myForm" action="" method="post">
  <input type="text" class="required" name="..." ...>
  or simply
  <input type="text" name="..." required>
  .... all other fields
</form>