JavaScript Form Validation -

Question

I'm trying to get a basic javascript validation. For some reason it's picking up text and drop downs but not radio buttons? What am I doing wrong?

JS Fiddle

<script>
    function validateForm(formId)
    {
        var inputs, index;
        var form=document.getElementById(formId);
        inputs = form.getElementsByTagName('input');
        for (index = 0; index < inputs.length; ++index) {
            // deal with inputs[index] element.
            if (inputs[index].value==null || inputs[index].value==""))
                {
                    alert("Field is empty");
                    return false;
                 }
     }
</script>

Radio buttons are a bit special; every group with the same name belongs to the same object. So I think you will only have value if you checked/select one from it. — VMcreator
– VMcreator, Commented Aug 14, 2015 at 5:12
I'm with you there. My goal is to catch those who don't have a value which should turn a null or empty string right? — user4107395
– user4107395, Commented Aug 14, 2015 at 5:18
it may be possible doing it in HTML5 if you have problems in Javascript the-art-of-web.com/html/html5-form-validation — Whirlwind990
– Whirlwind990, Commented Aug 14, 2015 at 5:41
I was using required in HTML5 but there were too many user errors getting by. — user4107395
– user4107395, Commented Aug 14, 2015 at 5:48

DirtyBit · Accepted Answer · 2015-08-14 06:06:46Z

To validate for radio buttons, You need to go through all radio's and see which one's checked property is true.

<script>
      function validateForm(){
            for(i=0; i<document.form.radios.length; i++){       
              if(document.form.radios[i].checked==false){
              c=1;
              }
                else{
                c=0;
                break;
                }}        

                if(c==1){
                alert('Please select an option');
                }
         }
 </script>

document.form.radios.length gives the number of radio buttons.

You can also use HTML's required attribute to achieve the same functionality.

<form>
      <input type="radio" name="gender" value="Male" required /> Male
      <input type="radio" name="gender" value="Female" /> Female

      <input type="submit" name = "sub" value="SAVE" />
</form>

Fiddle

@user4107395 try this edited one with your correct formId? The function you posted has an extra closing bracket near if (inputs[index].value==null || inputs[index].value=="")) as well as your missing closing curly bracket of for-loop

jozzy · Accepted Answer · 2015-08-14 08:35:47Z

Provided below is an approach you can take to identify if you have multiple radio buttons in your form

function hasEmptyRadio(radioMap) {
    var emptyRadio = false;
    for (var i in radioMap) {
        if (radioMap.hasOwnProperty(i) && !radioMap[i]) {
            emptyRadio = true;
            break;
        }
    }
    return emptyRadio; // return the radio object or name if required
}

function markEmptyRadios(radioMap, radioObj) {
    var checked = radioObj.checked;
    radioMap[radioObj.name] = radioMap[radioObj.name] || checked;
}


function validateForm(formId) {
    var inputs, index;
    var radioMap = {};
    var form = document.getElementById(formId);
    inputs = form.getElementsByTagName('input');
    for (index = 0; index < inputs.length; ++index) {
        if (inputs[index].type === 'radio') {
            markEmptyRadios(radioMap, inputs[index])
        }
        // Your check for other input type can go here
    }
    alert("Radio Empty check returned => " + hasEmptyRadio(radioMap));
}

Collectives™ on Stack Overflow

JavaScript Form Validation -

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related