there is a checkbox and radio in this form, can you tell me how to validation through javascript

how to validation in javascript ? there is a checkbox/radio in this form, how to validation through javascript <!DOCTYPE html><html><body> <form action="#" method="post"> <table> <tr> <td>Name :</td> <td> <input type = "text" name="name" id="name"/> <span id="nameSpan"> </span> </td> </tr> <tr> <td> <input type="radio" name="gender" id ="gender" value="male"/> Male <input type="radio" name="gender" id="gender" value="female"/> Female <span id="genderSpan"></span> </td> </tr> <tr> <td><input type="checkbox" name="tnc" id="tnc"/> <span id="tncSpan"></span></td> <td><sup>*</sup>T & C</td> </tr> <tr> <td colspan="2"> <center> <input type="submit" value="Submit" onclick="return valid()"/> <button type="reset" value="Reset" >Reset</button> </center> </td> </tr> </table> </form> <script> function valid(){ var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; var tnc = document.getElementById("tnc").value; if( name ==="" || name===null){ document.getElementById("nameSpan").innerHTML="Enter your name"; return false; } if (gender ==="" || gender===null){ document.getElementById("nameSpan").innerHTML=""; document.getElementById("genderSpan").innerHTML="Select the options"; return false; } if (tnc==="" || tnc===null){ document.getElementById("genderSpan").innerHTML=""; document.getElementById("tncSpan").innerHTML="Tick the T&C"; return false } } </script> </body> </html> not workin

javascript validation

21st Sep 2017, 9:21 PM

Susovan Das

2 Answers

+ 2

Checkboxes and radio buttons doesn't have a 'value' attribute: you need to check validity for these elements through others attributes (commonly the 'checked' attribute... and anyway, you cannot access many elements at one time with same id value on them: id need to be unique, and getElementById() will always return only one element reference ^^ Finally, your tests will be bypassed as soon as first tested field are invalid, because you exit from the function with 'return' keyword before performing other tests (and you delete previous messages if next fields are invalid)... Check this fixed code, and ask if you need more verbose explanation than code do itself: <script> function valid(){ var name = document.getElementById("name").value; //var gender = document.getElementById("gender").value; var gender = document.getElementsByName("gender"); //var tnc = document.getElementById("tnc").value; var tnc = document.getElementById("tnc").checked; var result = true; if( name ==="" || name===null){ document.getElementById("nameSpan").innerHTML="Enter your name"; result = false; } var none_checked = true; for (var i=0; i<gender.length; i++) { if (gender[i].checked) { none_checked = false; break; } } if (none_checked) { //document.getElementById("nameSpan").innerHTML=""; document.getElementById("genderSpan").innerHTML="Select the options"; result = false; } if (!tnc){ //document.getElementById("genderSpan").innerHTML=""; document.getElementById("tncSpan").innerHTML="Tick the T&C"; result = false; } return result; } </script>

22nd Sep 2017, 5:31 AM

visph