How to validate the form using jQuery, prevent submission of form and show proper error messages in a specified div?

Question

I'm using jQuery v1.7.1 in my project.

I've following HTML form:

<div class="alert-danger">                  
</div>
<form action="index.php" class="navbar-form pull-right" id="formzip" method="post">
  <input type="hidden" class="form-control" name="op" id="op" value="zip_code">
  <input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
  <input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip" id="zip" value=""> <i class="icon-zip" style="margin-top:3px;" onclick='$("#formzip").submit();'></i>
</form>

Now here I want to validate the form with id="formzip" using jQuery. Following validations need to apply:

If the input field having id zip doesn't contain any value at the submission of a form.
If the input field having id zip contains invalid US zip code value or any value which is not a valid US zip code.

I want to show relevant error messages in a <div class="alert-danger"></div> and want to prevent the form from submission. That is the page currently displaying should remain as it is.

The necessary regular expression string to validate US zip code is as follows :

"/^([0-9]{5})(-[0-9]{4})?$/i"

Can someone please help me in achieving this functionality?

It will be of immense help to me if someone could help me.

thanks for spending some of your valuable time in understanding my issue. If you want any further information regarding my issue please feel free to ask me.

Waiting for your precious replies.

Thanks in advance.

@Derija93:Actually I have performed the validation using PHP on sever side but now I have to do it on client side using jQuery that's why I'm asking for a helping hand. — PHPLover, Oct 06 '14 at 08:03
Well, that's a start. Do you know jQuery well? One proposition would be to simply handle the form submission event and cancel it if necessary by doing `$('#formzip').on('submit', function(jqEvt){ jqEvt.preventDefault(); });`. This will prevent the form from submitting at all, it should be fairly easy to adapt it to your needs. — Kiruse, Oct 06 '14 at 08:05
@Derija93:Thanks for your comment. But if you could post your workable code as an answer it would be great for me and others who faces such kind of issues. Can you please post your complete code as an answer? — PHPLover, Oct 06 '14 at 08:08
There is no need for me to reinvent the wheel. As the other two answers show, there are already plenty of plugins out there for validation. You could probably also just look at the source code of those plugins if you are interested in how it works... or at [this SO question](https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script). — Kiruse, Oct 06 '14 at 08:12

score 2 · Accepted Answer · answered Oct 06 '14 at 08:12

you can do something like this:-

$(function(){
$('#formzip').on('submit',function(){
   if($('#zip').val()=='')
   {
       $('.alert-danger').html('zipcode is empty');
       return false;
  }else if(!isValidZip($('#zip').val()))
  {
      $('.alert-danger').html('zipcode is invalid');
      return false;
  }
});
});

function isValidZip(zip) {
   var pattern = new RegExp(/^([0-9]{5})(-[0-9]{4})?$/i);
  return pattern.test(zip);
 };

or if you want to show same message you can do this:-

$('#formzip').on('submit',function(){
  if(!isValidZip($('#zip').val()))
  {
      $('.alert-danger').html('zipcode is invalid');
      return false;
  }
});

Demo

:If I use your code as it is then so I need to use the following line of code from HTML: onclick='$("#formzip").submit();' Or should I skip this file? — PHPLover, Oct 06 '14 at 08:19
you should not use because its on textbox you should use button or submit — Umesh Sehta, Oct 06 '14 at 09:23

Rajitha Bandara · Answer 2 · 2014-10-06T08:25:51.070

You do not need to use any custom validation library for this. First stop the submit event and let your validation rules run. Remove your onClick event for i elem.

Just some thoughts. Another person might have different approach.

$(document).ready(function(){
$(".icon-zip").click(function(){
$(".alert-danger").html("");
var zip = $("#zip").val();
//run validations
var regex = /^([0-9]{5})(-[0-9]{4})?$/i;
if(!regex.test(zip)){
  $(".alert-danger").html("Invalid zip");
  return;
}

//if all ok
//do ajax request to server with your data
//Handle server response in ajax callback functios
$.ajax(function(){
 url:"index.php",
 type:"post",
 dataType: 'json',
 data: $("formzip").serialize(),
 success:function(data){
   if(data.status == "ok"){
     // show success msg
   }
 },
error:function(data){
     // show error msg
}

});

});
});

score 0 · Answer 3 · answered Oct 06 '14 at 08:00

0

I hope bellow content and reference can help you

http://jqueryvalidation.org/

and view Demo from

http://jqueryvalidation.org/files/demo/

answered Oct 06 '14 at 08:00

VishalDream

311
3
6

How to validate the form using jQuery, prevent submission of form and show proper error messages in a specified div?

3 Answers3