javascript - jQuery validation is duplicating else statements | Values won't print once validation is finished -
so validating form - validation works fine if user wrong .after <p></p> error message. if user click button more once keep printing out .after error message!
i have tried - includes putting boolean expression in if statement , once .after error message prints make expression falseso if statement won't run again. did not work me.
i can't values print out once validation done!?
to try , fix have wrapped tried wrap validation in if statement tests see if validation true , @ bottom of if statement after validation make boolean value turn false , have else statement prints out values each input...this won't work me!
jquery:
// javascript document $(document).ready(function() { //submit form validation $('#submit').click(function () { //get values input fields: $name = $('#txtname').val(); $age = $('#numage').val(); //sex: $sex = $('sex').val(); //email: $email = $('#txtemail').val(); $confirmemail = $('#txtconfirmemail').val(); //checkbox $("input[name='interest']:checked").each(function() { $gender += "" + $(this).val() + ", "; }); //fish varieties: $varieties = $('#txtvariety').val(); //put checkbox values array var values = $('input:[name="interest[]"]:checked').map(function () { return this.value; }).get(); //printdetails id print out to. for(var i=0; i<values.length;i++){ alert(values[i]); } //start validation if($name.length < 5){ $('#txtname').focus(); $('#txtname').val(""); $('#txtname').after("<p id='after1' style='color:red;'><strong>enter name greater 5 letters!</strong></p>"); return false; } else{ $('p').remove('#after1'); $name = $('#txtname').val(); } if($age.length > 105 || $age.length < 1){ $('#numage').focus(); $('#numage').val(""); $('#numage').after("<p id='after2' style='color:red;'><strong>enter age less 106 , greater 0!</strong></p>"); return false; } else{ $('p').remove('#after2'); } function isvalidemailaddress($email) { var pattern = new regexp(/^[+a-za-z0-9._-]+@[a-za-z0-9.-]+\.[a-za-z]{2,4}$/i); // alert( pattern.test(emailaddress) ); return pattern.test($email); }; if(!isvalidemailaddress($email)){ $('#txtemail').focus(); $('#txtemail').after("<p id='after3' style='color:red;'><strong>enter valid email - <span style='color:#0078ab;'>"+ $email +"</span> - not valid</strong></p>"); $('#txtemail').val(""); return false; } else{ $('p').remove('#after3'); //now check if email confirmed if($email != $confirmemail){ $('#txtconfirmemail').focus(); $('#txtconfirmemail').after("<p id='after4' style='color:red;'><strong>your email - <span style='color:#0078ab;'>"+ $confirmemail +"</span> - not match!</strong></p>"); $('#txtconfirmemail').val(""); return false; } else{ $('p').remove('#after4'); } } //check if there atleast 1 checkbox checked if($('input[type=checkbox:checked').length < 1) { $('#checkboxerror').html('<p id="after5" style="color:red;" id="after5">please check atleast 1 checkbox</p>'); return false; } else{ //this should remove above error message! $('p').remove('#after5'); } //these won't work? document.getelementbyid("printdetails").innerhtml = $name + $age + $gender + $sex + $varieties + $email; $("#printdetails").html("<div>" + $name + $age + $gender + $sex + $varieties + $email + " </div"); }); //end of onclick }); //end of document.ready html
<div data-role="page" id="page2"> <div data-role="header"> <h1>register jquery</h1> </div> <div data-role="content"> <!-- name, age --> <div data-role="fieldcontain"> <label for="txtname">name:</label> <input type="text" name="txtname" id="txtname" value="" /> </div> <div data-role="fieldcontain"> <label for="numage">age:</label> <input type="number" name="numage" id="numage" value="" /> </div> <!-- sex, default value = male--> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>sex</legend> <input type="radio" name="sex" id="sex_male" value="" /> <label for="sex_male">male</label> <input type="radio" name="sex" id="sex_female" value="" checked='checked' /> <label for="sex_female">female</label> </fieldset> </div> <!-- emails --> <div data-role="fieldcontain"> <label for="txtemail">e-mail:</label> <input type="email" name="txtemail" id="txtemail" value="" /> </div> <div data-role="fieldcontain"> <label for="txtconfirmemail">confirm e-mail:</label> <input type="email" name="txtconfirmemail" id="txtconfirmemail" value="" /> </div> <!-- interest in checkboxes --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>i interested in following</legend> <input type="checkbox" name="interest[]" value='comet' id="interest_0" class="custom" value="" /> <label for="interest_0">comet</label> <input type="checkbox" name="interest[]" value='common goldfish' id="interest_1" class="custom" value="" /> <label for="interest_1">common goldfish</label> <input type="checkbox" name="interest[]" id="interest_2" class="custom" value="black moor" /> <label for="interest_2">black moor</label> <input type="checkbox" name="interest[]" value='celestial eye' id="interest_3" class="custom" value="" /> <label for="interest_3">celestial eye</label> <input type="checkbox" name="interest[]" value='fantail' id="interest_4" class="custom" value="" /> <label for="interest_4">fantail</label> <input type="checkbox" name="interest[]" value='lionchu' id="interest_5" class="custom" value="" /> <label for="interest_5">lionchu</label> <input type="checkbox" name="interest[]" value='other' id="interest_6" class="custom" value="" /> <label for="interest_6">other</label> </fieldset> </div> <div data-role="fieldcontain" class='display'> <label for="txtvariety">fish varieties:</label> <textarea cols="40" rows="8" name="txtvariety" id="txtvariety"></textarea> </div> <p id='checkboxerror'></p> <!-- text area - fish varieties --> <!-- drop down select menu - how did u hear --> <div data-role="fieldcontain"> <label for="selectmenu" class="select">how did hear us?:</label> <select name="selectmenu" id="selectmenu"> <option value="internet">internet</option> <option value="email">email</option> <option value="friend">friend</option> <option value="billboard">billboard</option> <option value="other">other</option> </select> </div> <!-- register & start again buttons --> <input type="submit" id='submit' value="register"/> <input type="submit" id='resetform' value="start again" /> <!-- print out details --> <div id='printdetails'></div> i have feeling code should work - sees problem i',
ok after going through fiddle , think got working bare minimum code changes.
the main thing setting boolean isvalid @ beginning of submit button event true , setting false when fails validation test. displaying output when form valid.
also, jquery selectors incorrect , think there confusion between gender , sex. same thing, different words.
there still lots of room improvement looks homework assignment can tell maybe still learning.
Comments
Post a Comment