CODEWITHSUNDEEP
javascripthtmljquery
Janessa Bautista
Janessa Bautista

Reputation: 294

How can I Validate my form using class only?

I have radio buttons that has a same class.

and this radio buttons is dynamic, that's why I am thinking on using the class for validation.

Here is my code.

$('#listening_choices_wrapper').on('submit', function(e) {
    e.preventDefault();

    $(".validation_radio").each(function() {

    });

});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<form id="listening_choices_wrapper">
   <div class="listening_question_scenario">
      <p id="display_question_scenario">
         1. Question 1?
      </p>
   </div>
   <div id="question_choices" class="listening_question_choice">
      <input type="radio" class="validation_radio" name="answer_choice_0" value="17">
      <label>Test 1</label>
      <input type="radio" class="validation_radio" name="answer_choice_0" value="18">
      <label>Test 2</label>
      <input type="radio" class="validation_radio" name="answer_choice_0" value="19">
      <label>Test 3</label>
      <input type="radio" class="validation_radio" name="answer_choice_0" value="20">
      <label>Test 4</label>
   </div>
   <div class="listening_question_scenario">
      <p id="display_question_scenario">
         2. Question 2?
      </p>
   </div>
   <div id="question_choices" class="listening_question_choice">
      <input type="radio" class="validation_radio" name="answer_choice_1" value="17">
      <label>Test 5</label>
      <input type="radio" class="validation_radio" name="answer_choice_1" value="18">
      <label>Test 6</label>
      <input type="radio" class="validation_radio" name="answer_choice_1" value="19">
      <label>Test 7</label>
      <input type="radio" class="validation_radio" name="answer_choice_1" value="20">
      <label>Test 8</label>
   </div>

  <button type="submit" class="btn">Submit</button>
</form>

</body>
</html>

How can I validate them? so that the user can't submit it.

Any help would be really appreciated.

Upvotes: 0

Views: 77

Answers (2)

SneakyLenny
SneakyLenny

Reputation: 553

You can add the required attribute to all the input tags for native browser validation:

<div id="question_choices" class="listening_question_choice">
  <input type="radio" class="validation_radio" name="answer_choice_0" value="17" required>
  <label>Test 1</label>
  <input type="radio" class="validation_radio" name="answer_choice_0" value="18" required>
  <label>Test 2</label>
  <input type="radio" class="validation_radio" name="answer_choice_0" value="19" required>
  <label>Test 3</label>
  <input type="radio" class="validation_radio" name="answer_choice_0" value="20" required>
  <label>Test 4</label>
</div>

But to answer your question, I wrote this jQuery script:

$('#listening_choices_wrapper').on('submit', function(e) {
    $('.error').remove()
    e.preventDefault();
    
    $('.listening_question_choice').each((i, e) => {
        let valid = false
        $(e).find('.validation_radio').each((i ,e) => {
            if($(e).prop("checked")) {
                valid = true
            }
        })
        if (!valid) {
            $(e).append('<div class="error" style="color: red;">Error: this radio is required!</div>')
        }
    })
});

I hope this helps!

Upvotes: 1

Jamiec
Jamiec

Reputation: 136114

I would suggest that you wrap each bank of answers in a fieldset element, and put the class on that. You can then iterate over those with each (as you did in your code) and look to see whether there are no input elements that are :checked

if($(this).find("input:checked").length == 0){
  // no answer given
}

You can then also use some sort of label to improve the message to the user - and if any answers missed only then call e.preventDefault().

Live example below:

$('#listening_choices_wrapper').on('submit', function(e) {
    
    var missingAnswers = [];
    $(".validation_radio").each(function() {
      if($(this).find("input:checked").length == 0){
        missingAnswers.push($(this).data("label"));
      }
    });
    
    if(missingAnswers.length > 0){
      e.preventDefault();
      alert(`You are missing answers to: ${missingAnswers}`)
    }

});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<form id="listening_choices_wrapper">
   <div class="listening_question_scenario">
      <p id="display_question_scenario">
         1. Question 1?
      </p>
   </div>
   <div id="question_choices" class="listening_question_choice">
     <fieldset class="validation_radio" data-label="answer1">
        <input type="radio" name="answer_choice_0" value="17">
        <label>Test 1</label>
        <input type="radio" name="answer_choice_0" value="18">
        <label>Test 2</label>
        <input type="radio" name="answer_choice_0" value="19">
        <label>Test 3</label>
        <input type="radio" name="answer_choice_0" value="20">
        <label>Test 4</label>
      </fieldset>
   </div>
   <div class="listening_question_scenario">
      <p id="display_question_scenario">
         2. Question 2?
      </p>
   </div>
   <div id="question_choices" class="listening_question_choice">
      <fieldset class="validation_radio" data-label="answer2">
        <input type="radio" name="answer_choice_1" value="17">
        <label>Test 5</label>
        <input type="radio" name="answer_choice_1" value="18">
        <label>Test 6</label>
        <input type="radio" name="answer_choice_1" value="19">
        <label>Test 7</label>
        <input type="radio" name="answer_choice_1" value="20">
        <label>Test 8</label>
      </fieldset>
   </div>

  <button type="submit" class="btn">Submit</button>
</form>

</body>
</html>

Upvotes: 0

Related Questions