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 >
          <input type="radio" name="select" onchange="changeThis1(this)">
          <div >
            <div ></div>
          </div>
        </label>
  <div ><strong>1</strong></div>

  <label >
          <input type="radio" name="select" onchange="changeThis2(this)">
          <div >
            <div ></div>
          </div>
        </label>
  <div ><strong>2</strong></div>
  <br>

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

  <div  id="buttonfiltra">

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


  </div>

</form>

CodePudding user response：

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 >
        <input type="radio" name="select" />
        <div >
            <div ></div>
        </div>
    </label>
  <div ><strong>1</strong></div>

  <label >
        <input type="radio" name="select"  />
        <div >
            <div ></div>
        </div>
    </label>
  <div ><strong>2</strong></div>
  <br />

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

  <div  id="buttonfiltra">
    <button type="submit" id="link-ida">Filter</button>
    <input type="hidden" value="valuefilter"  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.
});