Answer

Validate a booking form with more than one user record

Nikhil Srivastava

418

I need to validate my form using jquery/javascript when the page is submitted.

The condition to validate my form are:

Name, age & email of first passenger is compulsory.
If user inputs the names of any of 2 to 10 passengers then it should be mandatory to add age & email IDs of all passengers.
Email IDs of all passengers should be unique.
user should agree terms and conditions

Here's my HTML CODE

<form> <div> <input type="text" id="fn1" placeholder="Full Name" /> <input type="number" id="ag1" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em1" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn2" placeholder="Full Name" /> <input type="number" id="ag2" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em2" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn3" placeholder="Full Name" /> <input type="number" id="ag3" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em3" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn4" placeholder="Full Name" /> <input type="number" id="ag4" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em4" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn5" placeholder="Full Name" /> <input type="number" id="ag5" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em5" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn6" placeholder="Full Name" /> <input type="number" id="ag6" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em6" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn7" placeholder="Full Name" /> <input type="number" id="ag7" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em7" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn8" placeholder="Full Name" /> <input type="number" id="ag8" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em8" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn9" placeholder="Full Name" /> <input type="number" id="ag9" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em9" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <div> <input type="text" id="fn10" placeholder="Full Name" /> <input type="number" id="ag10" placeholder="Age" /> <select><option value="Male">Male</option><option value="Female">Female</option></select> <input type="email" id="em10" placeholder="E-mail" /> <input type="number" placeholder="Mobile" /> </div> <input type="checkbox" value="Agree to our terms and agreement" /> <input type="submit" value="submit" /> </form>

Here's my Javascript CODE

Did this individually for every passenger, and no code still to check unique email ID

$("form").submit(function (event) {

var email = "\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$";

if ($('#fn1').val() == "") {

alert("At least one participant required")

$('#fullname1').focus();

event.preventDefault();

return

}

if ($('#fn1').val() != "" && ($('#ag1').val() == "" || !emailpattern.test($('#em1').val()))) {