javascript - why form is submitted while the return from validateform() is false? -
i have code have javascript validation in jquery mobile.but problem form submitted validate form return false.what may reason please reply? below code.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> // validate contact table function validatecontact() { var emergencycontactelt = document.getelementbyid("emergency_contact"); var emergencycontacteltrows = emergencycontactelt.rows; var maxrownbr = emergencycontactelt.rows.length; var error = 0; (var = 1; < maxrownbr; i++) { // validation first name if (emergencycontacteltrows[i].cells[1].children[0].children[0].value == "") { emergencycontacteltrows[i].cells[1].children[0].children[0].style.background = '#e35152'; emergencycontacteltrows[i].cells[1].children[0].focus(); error = error + 1; } else { emergencycontacteltrows[i].cells[1].children[0].children[0].style.background = 'white'; } // validation last name if (emergencycontacteltrows[i].cells[2].children[0].children[0].value == "") { emergencycontacteltrows[i].cells[2].children[0].children[0].style.background = '#e35152'; emergencycontacteltrows[i].cells[2].children[0].focus(); error = error + 1; } else { emergencycontacteltrows[i].cells[2].children[0].children[0].style.background = 'white'; } // validation phone number if (emergencycontacteltrows[i].cells[3].children[0].children[0].value == "") { emergencycontacteltrows[i].cells[3].children[0].children[0].style.background = '#e35152'; emergencycontacteltrows[i].cells[3].children[0].focus(); error = error + 1; } else { emergencycontacteltrows[i].cells[3].children[0].children[0].style.background = 'white'; } } if (error > 0) { return false; } else { return true; } } //validate form function validateform() { var error = 0; if (!validatecontact()) { error++; alert("contact"); } // don't submit form if there errors if (error > 0) { alert(error); alert("highlight fields required"); return false; } else { return true; } } </script> </head> <body> <form name="submitform" id="submitform" method="post" action="%bind(:25)" onsubmit="return validateform();" > <table id="emergency_contact" name="emergency_contact"> <tbody> <tr> <th>relationship</th> <th>first name</th> <th>last name</th> <th>phone</th> <th>email id</th> <th>consent</th> <th>working/studying in adu</th> <th>employee id/student id</th> <th>add/delete</th> </tr> <tr> <td> <select name="relationship" id="relationship" class="relationship" style="width:100%"> <option value="b" selected="">brother</option> <option value="d">daughter</option> <option value="e">employee</option> <option value="er">employer</option> <option value="es">ex-spouse</option> </select> </td> <td> <input name="first_name" id="first_name" value="" style="width:100%" type="text"> </td> <input name="last_name" id="last_name" value="" style="width:100%" type="text"> </td> <td> <input name="phone" value="" style="width:100%" type="text"> </td> </tr> </tbody> </table> <div data-role="ui-grid-a"> <div class="ui-block-a" style="width:50%"> <input type="button" id="previous" value="previous" onclick="window.location.href='%bind(:24)'"/> </div> <div class="ui-block-b" style="width:50%"> <!--<input type="submit" id="submit" value="save , next" class="ui-btn ui-shadow"/>--> <input type="submit" id="submit" value="save , next" /> </div> <div> </form> </body> </html>
you have console errors. why not use jquery when have - here no longer need onsubmit, add
.error { background-color:#e35152} and have
$(function() { $("#submitform").on("submit", function(e) { $(this).find("input[type='text']").each(function() { $(this).toggleclass("error", $.trim(this.value) == ""); }); if ($(".error").length > 0) { e.preventdefault(); alert("highlight fields required"); } }); }); $(function() { $("#submitform").on("submit", function(e) { $(this).find("input[type='text']").each(function() { $(this).toggleclass("error", $.trim(this.value) == ""); }); if ($(".error").length > 0) { e.preventdefault(); alert("highlight fields required"); } }); }); .error { background-color: #e35152 }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form name="submitform" id="submitform" method="post" action="%bind(:25)"> <table id="emergency_contact" name="emergency_contact"> <tbody> <tr> <th>relationship</th> <th>first name</th> <th>last name</th> <th>phone</th> <th>email id</th> <th>consent</th> <th>working/studying in adu</th> <th>employee id/student id</th> <th>add/delete</th> </tr> <tr> <td> <select name="relationship" id="relationship" class="relationship" style="width:100%"> <option value="b" selected="">brother</option> <option value="d">daughter</option> <option value="e">employee</option> <option value="er">employer</option> <option value="es">ex-spouse</option> </select> </td> <td> <input name="first_name" id="first_name" value="" style="width:100%" type="text"> </td> <td> <input name="last_name" id="last_name" value="" style="width:100%" type="text"> </td> <td> <input name="phone" value="" style="width:100%" type="text"> </td> </tr> </tbody> </table> <div data-role="ui-grid-a"> <div class="ui-block-a" style="width:50%"> <input type="button" id="previous" value="previous" onclick="window.location.href='%bind(:24)'" /> </div> <div class="ui-block-b" style="width:50%"> <!--<input type="submit" id="submit" value="save , next" class="ui-btn ui-shadow"/>--> <input type="submit" id="submit" value="save , next" /> </div> <div> </form>
Comments
Post a Comment