JQuery form validation with error message

user_15934457 0
Viewed 292

I tried the following code to validate the field. Work fine. But here I am facing two problems.

  1. When there is no value in the required field, the error message will show after clicking. But when there is a value in a required field, the error message is removed from all fields after clicking. I want the error to be removed from the field after clicking on the value in that field.

2. Here the click method works.

$(".submit_btn").click(function(){ 
// something here

});

But why not work like this (Submit Button) ?

$('form').on('submit', function () {
// something here

});


$(".submit_btn").click(function(){ 
  $('.trexright-frs input[required]').parent().next('.error').remove(); 
  if (!$('.trexright-frs input[required]').val()) {
    $(".trexright-frs input[required]").parent().after("<span class='error'>Required field.</span>");
  } 
});
.trexright-frs p,
.trexright-frs input {
  width: 100%;
}

.error {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="trexright">
<form name="checkout" method="post" class="trexright_form" action="">
  <div class="trexright-frs">

    <p class="form-row">
      <label for="first_name" class="">First Name</label>
      <span class="input-wrapper">
        <input type="text" class="first_name_class" name="first_name" id="first_name_" placeholder="First name" value="" required />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <p class="form-row">
      <label for="last_name" class="">Last Name</label>
      <span class="input-wrapper">
        <input type="text" class="last_name_class" name="last_name" id="last_name_" placeholder="Last name" value="" required />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <p class="form-row">
      <label for="phone" class="">Phone</label>
      <span class="input-wrapper">
        <input type="text" class="phone_number" name="phone" id="phone_no" placeholder="Phone" value="" required />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <p class="form-row">
      <label for="location" class="">Location</label>
      <span class="input-wrapper">
        <input type="text" class="location_class" name="location" id="location_" placeholder="Location" value="" />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <input type="submit" value="Submit" class="submit_btn">

  </form>
</div>
</div>

css html jquery
1 Answers

Please follow this snippet code, it will help you.

   $( document ).ready(function() {

/*$(".submit_btn").click(function(){ 
  $('.trexright-frs input[required]').parent().next('.error').remove(); 
  if (!$('.trexright-frs input[required]').val()) {
    $(".trexright-frs input[required]").parent().after("<span class='error'>Required field.</span>");
  } 
});*/

  $(document).on('submit','form',function(event){
      
      $('.trexright-frs input.required').parent().next('.error').remove(); 
      var countError = 0;
      $( '.trexright-frs input.required' ).each(function( index ) {
         if ($(this).val()=='') {
            $(this).parent().after("<span class='error'>Required field.</span>");
            countError++;
         }
      
      });
      if(countError!='0')
         return false;
      else
         return true;
  });

  $( "input.required" ).keyup(function() {
     if($(this).val()!=''){
         $(this).parent().next('.error').remove();
     }
  });
});
.trexright-frs p,
.trexright-frs input {
  width: 100%;
}

.error {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="trexright">
<form name="checkout" method="post" class="trexright_form" action="">
  <div class="trexright-frs">

    <p class="form-row">
      <label for="first_name" class="">First Name</label>
      <span class="input-wrapper">
        <input type="text" class="first_name_class required" name="first_name" id="first_name_" placeholder="First name" value="" />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <p class="form-row">
      <label for="last_name" class="">Last Name</label>
      <span class="input-wrapper">
        <input type="text" class="last_name_class required" name="last_name" id="last_name_" placeholder="Last name" value="" />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <p class="form-row">
      <label for="phone" class="">Phone</label>
      <span class="input-wrapper">
        <input type="text" class="phone_number required" name="phone" id="phone_no" placeholder="Phone" value="" />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <p class="form-row">
      <label for="location" class="">Location</label>
      <span class="input-wrapper">
        <input type="text" class="location_class" name="location" id="location_" placeholder="Location" value="" />
      </span>
      <!-- <span class="field_error">This field is required.</span> -->
    </p>

    <input type="submit" value="Submit" class="submit_btn">

  </form>
</div>
</div>

user_65608090
Related