All geek questions in one place

Checking the radio button in javascript

It is necessary to check the input of the radio button, i.e. when the submit button is pressed and no radio buttons have been selected, it warns the user saying “select the checkbox”, and if the radio button is selected, just submit the form, does not need a warning.

You can use HTML CSS and JavaScript for this, I know that it is 1000 times easier in jquery, but unfortunately I can not use it.

And I know that my HTML is not valid, but if it does not directly affect my current problem, I will process it later.

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> First time visitor?:<br/> <label for="s1">Yes</label> <input type="radio" id="1" name="yesno" value="1"/> <br/> <label for="s2">No</label> <input type="radio" id="1" name="yesno" value="2"/> <br/> <input type="submit" value="Submit"><br/> </form>

Any pointers are very appreciated, thanks.

+6
source share
5 answers

1st: If you know that your code is incorrect, you must fix it before doing anything!

You can do something like this:

 function validateForm() { var radios = document.getElementsByName("yesno"); var formValid = false; var i = 0; while (!formValid && i < radios.length) { if (radios[i].checked) formValid = true; i++; } if (!formValid) alert("Must check some option!"); return formValid; }​

See in action: http://jsfiddle.net/FhgQS/

+14
source

Full javascript validation example:

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Radio button: full validation example with javascript</title> <script> function send() { var genders = document.getElementsByName("gender"); if (genders[0].checked == true) { alert("Your gender is male"); } else if (genders[1].checked == true) { alert("Your gender is female"); } else { // no checked var msg = '<span style="color:red;">You must select your gender!</span><br /><br />'; document.getElementById('msg').innerHTML = msg; return false; } return true; } function reset_msg() { document.getElementById('msg').innerHTML = ''; } </script> </head> <body> <form action="" method="POST"> <label>Gender:</label> <br /> <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male <br /> <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female <br /> <div id="msg"></div> <input type="submit" value="send>>" onclick="return send();" /> </form> </body> </html>

Hi,

Fernando

+8
source 
 <form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data"> <div class="text-input"> <label>Gender: </label> <input class="form-control" type="radio" name="gender" id="male" value="male" /> <label for="male">Male</label> <input class="form-control" type="radio" name="gender" id="female" value="female" /> <label for="female">Female</label> </div> <div class="text-input" align="center"> <input type="submit" name="register" value="Submit" onclick="return radioValidation();" /> </div> </form> <script type="text/javascript"> function radioValidation(){ var gender = document.getElementsByName('gender'); var genValue = false; for(var i=0; i<gender.length;i++){ if(gender[i].checked == true){ genValue = true; } } if(!genValue){ alert("Please Choose the gender"); return false; } } </script>

Source: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

+1
source 
 document.forms[ 'forms1' ].onsubmit = function() { return [].some.call( this.elements, function( el ) { return el.type === 'radio' ? el.checked : false } ) }

Just something out of my head. Not sure if the code is working.

0
source

In addition to the Javascript solutions discussed above, you can also use the HTML 5 solution by marking the radio buttons as required in the markup. This will eliminate the need for any Javascript and let the browser work for you.

See HTML5: How to use the “required” attribute with the “radio” input field for more information on how to do this well.

0
source

Source: https://habr.com/ru/post/914254/

More articles:


All Articles