JQuery form validation with error message

Question

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

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>

Vishal P Gothi · Accepted Answer · 2021-07-15 06:26:13Z

2

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>

edited Jul 15, 2021 at 6:26

answered Jul 14, 2021 at 13:10

Vishal P Gothi

9985 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mary X Nabors Over a year ago

Not working properly. Moreover I did not want to do it with Keyup function. I mean, after clicking the submit button, the error in the field where the value / data will be will be removed. Will show error in other required fields.

Vishal P Gothi Over a year ago

@MaryXNabors you can remove the keyup function if you don't want to do the same, and please know me what is not working properly so I can edit my answer with the updates.

Mary X Nabors Over a year ago

The keyup function is working on your code. But when there is a value in a field, even if I click on the submit button, it shows an error. But I don't want to show error in the field where there is value. Can it be fixed please?

Vishal P Gothi Over a year ago

@MaryXNabors I have updated the answer, please check now.

Mary X Nabors Over a year ago

Your code is working. But the jQuery is not working properly with the HTML structure I have given. Thank you so much for your efforts. I am accepting the code. Why doesn't the jQuery code work with the HTML I provided? Any solution please?

Collectives™ on Stack Overflow

JQuery form validation with error message

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related