CODEWITHSUNDEEP
reactjs
redRanger
redRanger

Reputation: 11

validation for radio buttons ( at least one is checked )

Validation of multiple radio buttons, at least one have to be check if not alert error

I have tried setting Id to the radio button and the section id, but it return me "cannot set property of 'checked' of null " 

function validate() {
if (document.getElementById('course').checked) {
alert("option selected!");
}
else {
    alert("No option selected!");
    }
};

<Section id='cbutton'>

<Radio                                                  
id="course"
name="CompSci"
value={values.CompSci}
options={[
{ label: "Major", value: "MAJOR" },
{ label: "Minor", value: "MINOR" }]
onChange={onChange}
inputSize={FIELD_SIZE.LARGE}
label="CompSci"
error={errors.CompSci}
/>

<Radio                                                  
id="course"
name="ChemEngineering"
value={values.ChemEngineering}
options={[
{ label: "Major", value: "MAJOR" },
{ label: "Minor", value: "MINOR" }]
onChange={onChange}
inputSize={FIELD_SIZE.LARGE}
label="ChemEngineering"
error={errors.ChemEngineering}
/>

Managed to validate the part where none of radio buttons is checked it will prompt a alert, but after I tried to check one it still prompt the alert.

Upvotes: 1

Views: 1939

Answers (2)

samuvel johnson
samuvel johnson

Reputation: 47

Need to validate value based on name.id is unique across the DOM.

function validate() {
    var radios = document.getElementsByName("course");
    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;
};

<Section id='cbutton'>

<Radio                                                  
name="course"
value={values.CompSci}
options={[
{ label: "Major", value: "MAJOR" },
{ label: "Minor", value: "MINOR" }]
onChange={onChange}
inputSize={FIELD_SIZE.LARGE}
label="CompSci"
error={errors.CompSci}
/>

<Radio                                                  
name="course"
value={values.ChemEngineering}
options={[
{ label: "Major", value: "MAJOR" },
{ label: "Minor", value: "MINOR" }]
onChange={onChange}
inputSize={FIELD_SIZE.LARGE}
label="ChemEngineering"
error={errors.ChemEngineering}
/>

Upvotes: 0

sam-m
sam-m

Reputation: 166

What is your onChange method and your state? Are the radio elements controlled or uncontrolled? If it's controlled you should be using handleChange to update the state and the checked value. For which you need a "checked" attribute. Here's an example of Radio buttons with React. 

const App = () => {
  const [selectedVal, setselectedVal] = React.useState('First')

  const handleChange = event => {
    console.log(event.target.value, event.target.checked)
    setselectedVal(event.target.value)
  }

  return (
    <div>
      <label htmlFor='smallest'>
        <input
          type='radio'
          value='First'
          checked={selectedVal === 'First'}
          onChange={handleChange}
        />
        <span>First</span>
      </label>
      <label htmlFor='largest'>
        <input
          type='radio'
          value='Second'
          id='largest'
          checked={selectedVal === 'Second'}
          onChange={handleChange}
        />
        <span>Second</span>
      </label>
      <div>You've selected {selectedVal}!</div>
    </div>
  )
}

Upvotes: 1

Related Questions