validation - Can two or more conditional statements placed inside a function in javascript? -
i newbie in javascript. can't find answer this. not sure whether relevant. have registration form 2 fields.on submit, should validated. here in code, first written if condition works. if first if statement commented, second if condition works.
html code :
<body> <div align="center"> <h1>registration</h1> <form action="" method="post" name="reg"> <table> <tr> <td><label> enter full name : </label></td> <td><input type="text" id="id1" name="username" placeholder="minimum 6 charactors"></td> </tr> <tr><td></td><td><label style="color:red;" id="label1"></label></td></tr> <tr> <td><label> gender : </label></td> <td><input type="radio" name="gender" value="female"><label> female </label> <input type="radio" name="gender" value="male"><label> male </label></td> </tr> <tr><td></td><td><label style="color:red;" id="label2"></label></td></tr> </table> <br/><button name="submit" value="submit" onclick="return validate_form()">submit</button> </form> </div> </body> js:
<script type="text/javascript"> function validate_form () { var name=document.getelementbyid("id1").value; var gender=document.getelementsbyname("gender"); if(name=="") { document.getelementbyid("label1").innerhtml="enter name"; return false; } else if(name.length<6) { document.getelementbyid("label1").innerhtml="minimum 6 charactors"; return false; } else { return true; } if(gender.checked) { return true; } else { document.getelementbyid("label2").innerhtml="check gender"; return false; } } </script> in jsfiddle, gives error like
{"error": "shell form not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.shellform object @ 0x56ae150>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'js lib', 'field': <django.forms.models.modelchoicefield object @ 0x56b3ed0>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.shellform object @ 0x56ae150>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'js wrap', 'field': <django.forms.fields.typedchoicefield object @ 0x5c03510>, 'help_text': '', 'name': 'js_wrap'}"} i donno error means!
you have rewrite validation code bit. check demo - demo:
your problems:
- function returns before
genderchecked; - you cannot check multiple checkboxes way:
if(gender.checked)
below working code
function validate_form() { var name = document.getelementbyid("id1").value, gender = document.getelementsbyname("gender"), result = true, genderpass = 0; if (name == "") { document.getelementbyid("label1").innerhtml = "enter name"; result = false; } else if (name.length < 6) { document.getelementbyid("label1").innerhtml = "minimum 6 charactors"; result = false; } else { document.getelementbyid("label1").innerhtml = ""; } array.prototype.foreach.call(gender, function(item) { genderpass += item.checked ? 1 : 0 }); if (genderpass === 0) { document.getelementbyid("label2").innerhtml = "check gender"; result = false; } else { document.getelementbyid("label2").innerhtml = ""; } return result; } function validate_form() { var name = document.getelementbyid("id1").value, gender = document.getelementsbyname("gender"), result = true, genderpass = 0; if (name == "") { document.getelementbyid("label1").innerhtml = "enter name"; result = false; } else if (name.length < 6) { document.getelementbyid("label1").innerhtml = "minimum 6 charactors"; result = false; } else { document.getelementbyid("label1").innerhtml = ""; } array.prototype.foreach.call(gender, function(item) { genderpass += item.checked ? 1 : 0 }); if (genderpass === 0) { document.getelementbyid("label2").innerhtml = "check gender"; result = false; } else { document.getelementbyid("label2").innerhtml = ""; } return result; } <div align="center"> <h1>registration</h1> <form action="" method="post" name="reg"> <table> <tr> <td><label> enter full name : </label></td> <td><input type="text" id="id1" name="username" placeholder="minimum 6 charactors"></td> </tr> <tr><td></td><td><label style="color:red;" id="label1"></label></td></tr> <tr> <td><label> gender : </label></td> <td><input type="radio" name="gender" value="female"><label> female </label> <input type="radio" name="gender" value="male"><label> male </label></td> </tr> <tr><td></td><td><label style="color:red;" id="label2"></label></td></tr> </table> <br/><button name="submit" value="submit" onclick="return validate_form();">submit</button> </form> </div>
Comments
Post a Comment