James
James

Reputation: 53

Problem with required warning message and submit form

I'm implemented the code taken from here to check if radio button is checked and if not, see a warning message.

My code works, but I have a button for submit with ajax (jQuery(function($)) that go ahead also if radio input is not checked.

Some idea to avoid to run function jQuery if function validateForm() is validated?

Here my code:

document.getElementById("filter").onsubmit = validateForm;

function validateForm() {
  var validConsumo = validateConsumo();
  
  //if all fields validate go to next page
  return validConsumo;
}

function validateConsumo() {
  var select = document.getElementById("filter").select,
    errorSpan = document.getElementById("error_select"),
    isChecked = false,
    i;
  errorSpan.innerHTML = "";

  for (i = 0; i < select.length; i += 1) {
    if (select[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    errorSpan.innerHTML = "* You must pick a value";
    return false;
  }

  return true;
}

jQuery(function($) {

  $('#filter').submit(function() {
    var filter = $('#filter');
    $.ajax({
      url: filter.attr('action'),
      data: filter.serialize(), // form data
      type: filter.attr('method'), // POST
      beforeSend: function(xhr) {
        filter.find('button').text('Filtering...'); // changing the button label
      },
      success: function(data) {
        filter.find('button').text('Filter'); // changing the button label back
        $('#response').html(data); // insert data
      }
    });
    return false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">


  <label class="toggler-wrapper style-19">
          <input type="radio" name="select" onchange="changeThis1(this)">
          <div class="toggler-slider">
            <div class="toggler-knob"></div>
          </div>
        </label>
  <div class="my"><strong>1</strong></div>

  <label class="toggler-wrapper style-19">
          <input type="radio" name="select" onchange="changeThis2(this)">
          <div class="toggler-slider">
            <div class="toggler-knob"></div>
          </div>
        </label>
  <div class="my"><strong>2</strong></div>
  <br>

  <span id="error_select" class="error"></span>

  <div class="buttonfiltra" id="buttonfiltra">

    <button id="link-ida">Filter</button>
    <input type="hidden" value="valuefilter" class="submit" id="link-id" name="action">


  </div>

</form>

Upvotes: 0

Views: 105

Answers (1)

Vijay Hardaha
Vijay Hardaha

Reputation: 2584

function validateForm() {
  var validConsumo = validateConsumo();

  //if all fields validate go to next page
  return validConsumo;
}

function validateConsumo() {
  var select = document.getElementById("filter").select,
    errorSpan = document.getElementById("error_select"),
    isChecked = false,
    i;
  errorSpan.innerHTML = "";

  for (i = 0; i < select.length; i += 1) {
    if (select[i].checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    errorSpan.innerHTML = "* You must pick a value";
    return false;
  }

  return true;
}

console.log(validateConsumo());
$(document).on("submit", "form#filter", function(e) {
  e.preventDefault();
  // Check for validations.
  if (!validateConsumo()) {
    console.log("Failed validation");
    return;
  }

  console.log("Successful validation");

  // Rest of the code here.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST" id="filter">
  <label class="toggler-wrapper style-19">
        <input type="radio" name="select" />
        <div class="toggler-slider">
            <div class="toggler-knob"></div>
        </div>
    </label>
  <div class="my"><strong>1</strong></div>

  <label class="toggler-wrapper style-19">
        <input type="radio" name="select"  />
        <div class="toggler-slider">
            <div class="toggler-knob"></div>
        </div>
    </label>
  <div class="my"><strong>2</strong></div>
  <br />

  <span id="error_select" class="error"></span>

  <div class="buttonfiltra" id="buttonfiltra">
    <button type="submit" id="link-ida">Filter</button>
    <input type="hidden" value="valuefilter" class="submit" id="link-id" name="action" />
  </div>
</form>

Remove document.getElementById("filter").onsubmit = validateForm;

and then update jQuery code like this:

$("#filter").on("submit", function (e) {
    e.preventDefault();

    // Check for validations.
    if (!validateForm()) {
        return;
    }

    // Rest of the code here.
});

Upvotes: 1

Related Questions