CODEWITHSUNDEEP
javascripthtml
RRR
RRR

Reputation: 19

How can I establish to validate at least one input field in html?

I have the following html code:

<label class="checkbox-inline">
<input type="checkbox" name="field_1" value="field_1"    id="field_1"/> Field 1  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_2" value="field_2"    id="field_2"/> Field 2  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_3" value="field_3"    id="field_3"/> Field 3  </label>

<button class="btn btn-primary" type="submit" onclick="getFormData('action')">   Execute <i class="fa fa-arrow-right"></i> </button>

I need a function JS to execute onclick "Execute" which control that at least 1 field is checked before getFormData('action')

Upvotes: 0

Views: 715

Answers (3)

Rajohan
Rajohan

Reputation: 1415

If you are using jQuery something like this should work.

if($('#field_1').is(':checked') || $('#field_2').is(':checked') || $('#field_3').is(':checked')) {
    // Do something
} else {
    return;
}

Or with plain JavaScript

let field1 = document.getElementById("field_1").checked;
let field2 = document.getElementById("field_2").checked;
let field3 = document.getElementById("field_3").checked;

if(field1 || field2 || field3) {
    // Do something
} else {
    return; 
}

Upvotes: 2

CodeF0x
CodeF0x

Reputation: 2682

You can use preventDefault() and an array to contain the sate of your inputs. Then expand your function that gets fired on submit to check if the array of states contains any truthy value. If yes, submit.

function getFormData(action, event) {
  var checked = [];
  var checkboxes = document.querySelectorAll('input[type="checkbox"');

  for (var i = 0; i < checkboxes.length; i++) {
    checked.push(checkboxes[i].checked);
  }

  if (!checked.includes(true)) {
    event.preventDefault();
  }
}
<form>
  <label class="checkbox-inline">
<input type="checkbox" name="field_1" value="field_1"    id="field_1"/> Field 1  </label>

  <label class="checkbox-inline">
<input type="checkbox" name="field_2" value="field_2"    id="field_2"/> Field 2  </label>

  <label class="checkbox-inline">
<input type="checkbox" name="field_3" value="field_3"    id="field_3"/> Field 3  </label>

  <button class="btn btn-primary" type="submit" onclick="getFormData('action', event)">   Execute <i class="fa fa-arrow-right"></i> </button>
</form>

Upvotes: 0

KaSkuLL
KaSkuLL

Reputation: 551

function getFormData(action){
var oneChecked=false;
  $('input[type=checkbox]').each(function () {
      if($(this).is(':checked')){
        oneChecked=true;
      }
  });
  if(oneChecked){
    console.log("At least one checked");
  }
  else{
    console.log("No one checked");
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" name="field_1" value="field_1"    id="field_1"/> Field 1  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_2" value="field_2"    id="field_2"/> Field 2  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_3" value="field_3"    id="field_3"/> Field 3  </label>

<button class="btn btn-primary" type="submit" onclick="getFormData('action')">   Execute <i class="fa fa-arrow-right"></i> </button>

Upvotes: 0

Related Questions