CODEWITHSUNDEEP
javascriptjqueryvalidation
Harish Kumar
Harish Kumar

Reputation: 74

Multi Radio Group Validation

I'm trying to validate multiple radio button group and after validation the form should be submitted. Validation is working fine but its getting submitted, please help.

<form action="" method="post" name="surveyForm" id="surveyForm" onSubmit="return checkdata();">
    <div>
        <input class="attrInputs" type="radio" name="chest" value="A">
        <input class="attrInputs" type="radio" name="chest" value="B">
        <input class="attrInputs" type="radio" name="chest" value="C">
    </div>
    <br />
    <div>
        <input class="attrInputs" type="radio" name="chest1" value="A">
        <input class="attrInputs" type="radio" name="chest1" value="B">
        <input class="attrInputs" type="radio" name="chest1" value="C">
    </div>
    <br />
    <input type="submit" value="click" onclick="return checkdata()" />
</form>
<script>
    function checkdata() {
        return checkdata1_2();
        return checkdata1_1();
    }
    function heckdata1_2() {
        if ($('input[name=chest]:checked').length <= 0) {
            alert("No radio checked");
            return false;
        }
    }
</script>
<script>
    function checkdata1_1() {
        if ($('input[name=chest1]:checked').length <= 0) {
            alert("No radio checked");
            return false;
        }
    }
</script>

Upvotes: 0

Views: 2096

Answers (2)

lshettyl
lshettyl

Reputation: 8171

Or simply use the below function. This would check if at leaast 2 radio buttons are checked, meaning 1 from each group. Therefore, only when at least 1 radio button is checked from each group, your form will submit.

Demo: Fiddle

JS:

function checkdata() {
    if ($('input[name^="chest"]:checked').length < 2) {
        alert("No radio checked");
        return false;
    }
    return true;
}

Upvotes: 0

Sachin
Sachin

Reputation: 2148

The problem is more than one return statement. It will return from first return statement and won't check for next line code. And I think even don't need two functions when you can do all that in one function.

This would be a simple way :

<form action="" method="post" name="surveyForm" id="surveyForm" onsubmit="return checkdata();">
<div>
    <input class="attrInputs" type="radio" name="chest" value="A">
    <input class="attrInputs" type="radio" name="chest" value="B"><input class="attrInputs"
        type="radio" name="chest" value="C"></div>
<br />
<div>
    <input class="attrInputs" type="radio" name="chest1" value="A"><input class="attrInputs"
        type="radio" name="chest1" value="B">
    <input class="attrInputs" type="radio" name="chest1" value="C"></div>
<br />
<input type="submit" value="click" onclick="return checkdata()" /></form>
<script>
    function checkdata() {
        if ($('input[name=chest]:checked').length <= 0) {
            alert("No radio checked");
            return false;
        }
        if ($('input[name=chest1]:checked').length <= 0) {
            alert("No radio checked");
            return false;
        }
    }
</script>

Check Fiddle

Upvotes: 1

Related Questions