javascript - multiple checkboxes at least 1 required in html 5 - Stack Overflow

admin管理员组

文章数量:1023684

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped

$('form').on('click', '.required_group', function() {
  $('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});

<script src=".1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="whatever" value="1" required class="required_group" />
  <input type="checkbox" name="whatever" value="2" required class="required_group" />
  <input type="checkbox" name="whatever" value="3" required class="required_group" />
  <input type="checkbox" name="whatever" value="4" required class="required_group" />
  <input type="submit" name="submit" />
</form>

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped

$('form').on('click', '.required_group', function() {
  $('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="whatever" value="1" required class="required_group" />
  <input type="checkbox" name="whatever" value="2" required class="required_group" />
  <input type="checkbox" name="whatever" value="3" required class="required_group" />
  <input type="checkbox" name="whatever" value="4" required class="required_group" />
  <input type="submit" name="submit" />
</form>

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 21, 2018 at 7:56 Andrew Bone 7,30122 gold badges2020 silver badges3434 bronze badges asked Jun 21, 2018 at 7:52 Mahesh VarvatkarMahesh Varvatkar 1111 silver badge55 bronze badges 3

• 2 The code you've shown works for me in Chrome; I see the 'required' notification when I click the button with no checkboxes selected. Can you be clearer what the issue is. – Rory McCrossan Commented Jun 21, 2018 at 8:01
• Firefox 60.0.2 works as well screenshot – DarkBee Commented Jun 21, 2018 at 8:05
• thankx its working proper – Mahesh Varvatkar Commented Jun 21, 2018 at 8:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

$('form').on('click', '.required_group', function() {
var flag=false;
 $('.required_group').each(function(e){
    if (this.checked) {
             flag=true;
     }
  });
if(!flag){
       // Do your code for Error Message
    }
});

Here is a method with a custom error message.

It looks at everything with the class required_group and counts every instance where it is checked. If the number is 0 it sets a custom message and triggers it, however, if there is one or more it will reset the message and trigger a submit.

function validateGrp() {
  let things = document.querySelectorAll('.required_group')
  let checked = 0;
  for (let thing of things) {
    thing.checked && checked++
  }
  if (checked) {
    things[things.length - 1].setCustomValidity("");
    document.getElementById('checkGroup').submit();
  } else {
    things[things.length - 1].setCustomValidity("You must check at least one checkbox");
    things[things.length - 1].reportValidity();
  }
}

document.querySelector('[name=submit]').addEventListener('click', () => {
  validateGrp()
});

<form id="checkGroup">
  <input type="checkbox" name="whatever" value="1" class="required_group" />
  <input type="checkbox" name="whatever" value="2" class="required_group" />
  <input type="checkbox" name="whatever" value="3" class="required_group" />
  <input type="checkbox" name="whatever" value="4" class="required_group" />
  <button name="submit">Submit</button>
</form>

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped

$('form').on('click', '.required_group', function() {
  $('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});

<script src=".1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="whatever" value="1" required class="required_group" />
  <input type="checkbox" name="whatever" value="2" required class="required_group" />
  <input type="checkbox" name="whatever" value="3" required class="required_group" />
  <input type="checkbox" name="whatever" value="4" required class="required_group" />
  <input type="submit" name="submit" />
</form>

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped

$('form').on('click', '.required_group', function() {
  $('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="checkbox" name="whatever" value="1" required class="required_group" />
  <input type="checkbox" name="whatever" value="2" required class="required_group" />
  <input type="checkbox" name="whatever" value="3" required class="required_group" />
  <input type="checkbox" name="whatever" value="4" required class="required_group" />
  <input type="submit" name="submit" />
</form>

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 21, 2018 at 7:56 Andrew Bone 7,30122 gold badges2020 silver badges3434 bronze badges asked Jun 21, 2018 at 7:52 Mahesh VarvatkarMahesh Varvatkar 1111 silver badge55 bronze badges 3

• 2 The code you've shown works for me in Chrome; I see the 'required' notification when I click the button with no checkboxes selected. Can you be clearer what the issue is. – Rory McCrossan Commented Jun 21, 2018 at 8:01
• Firefox 60.0.2 works as well screenshot – DarkBee Commented Jun 21, 2018 at 8:05
• thankx its working proper – Mahesh Varvatkar Commented Jun 21, 2018 at 8:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

$('form').on('click', '.required_group', function() {
var flag=false;
 $('.required_group').each(function(e){
    if (this.checked) {
             flag=true;
     }
  });
if(!flag){
       // Do your code for Error Message
    }
});

Here is a method with a custom error message.

It looks at everything with the class required_group and counts every instance where it is checked. If the number is 0 it sets a custom message and triggers it, however, if there is one or more it will reset the message and trigger a submit.

function validateGrp() {
  let things = document.querySelectorAll('.required_group')
  let checked = 0;
  for (let thing of things) {
    thing.checked && checked++
  }
  if (checked) {
    things[things.length - 1].setCustomValidity("");
    document.getElementById('checkGroup').submit();
  } else {
    things[things.length - 1].setCustomValidity("You must check at least one checkbox");
    things[things.length - 1].reportValidity();
  }
}

document.querySelector('[name=submit]').addEventListener('click', () => {
  validateGrp()
});

<form id="checkGroup">
  <input type="checkbox" name="whatever" value="1" class="required_group" />
  <input type="checkbox" name="whatever" value="2" class="required_group" />
  <input type="checkbox" name="whatever" value="3" class="required_group" />
  <input type="checkbox" name="whatever" value="4" class="required_group" />
  <button name="submit">Submit</button>
</form>

本文标签： javascriptmultiple checkboxes at least 1 required in html 5Stack Overflow