Как проверить форму с помощью jQuery, предотвратить отправку формы и показать правильные сообщения об ошибках в указанном div?

Я использую jQuery v1.7.1 в своем проекте.

У меня есть следующая HTML-форма:

<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>

Теперь я хочу проверить форму с помощью id="formzip" с помощью jQuery. Необходимо применить следующие проверки:

  1. Если поле ввода с id zip не содержит значения при отправке формы.
  2. Если поле ввода с идентификатором zip содержит недопустимое значение почтового индекса США или любое значение, которое не является допустимым почтовым индексом США.

Я хочу показывать соответствующие сообщения об ошибках в <div class="alert-danger"></div> и хочу предотвратить отправку формы. То есть отображаемая в данный момент страница должна оставаться такой, какая она есть.

Необходимая строка регулярного выражения для проверки почтового индекса США выглядит следующим образом:

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

Может ли кто-нибудь помочь мне в достижении этой функциональности?

Мне будет очень полезно, если кто-то сможет мне помочь.

спасибо, что потратили свое драгоценное время на понимание моей проблемы. Если вам нужна дополнительная информация по моей проблеме, пожалуйста, не стесняйтесь спрашивать меня.

Жду ваших драгоценных ответов.

Заранее спасибо.


javascript validation forms jquery jquery-1.7
person PHPFan    schedule 06.10.2014    source источник
comment
Вы даже пытались решить это самостоятельно?   -  person Kiruse    schedule 06.10.2014
comment
@ Derija93: На самом деле я выполнил проверку с помощью PHP на стороне сервера, но теперь мне нужно сделать это на стороне клиента с помощью jQuery, поэтому я прошу помощи.   -  person PHPFan    schedule 06.10.2014
comment
Что ж, это начало. Вы хорошо знаете jQuery? Одним из предложений было бы просто обработать событие отправки формы и отменить его, если необходимо, выполнив $('#formzip').on('submit', function(jqEvt){ jqEvt.preventDefault(); });. Это предотвратит отправку формы вообще, ее должно быть довольно легко адаптировать к вашим потребностям.   -  person Kiruse    schedule 06.10.2014
comment
@ Derija93: Спасибо за ваш комментарий. Но если бы вы могли опубликовать свой работоспособный код в качестве ответа, это было бы здорово для меня и других, кто сталкивается с такими проблемами. Не могли бы вы опубликовать свой полный код в качестве ответа?   -  person PHPFan    schedule 06.10.2014
comment
Мне нет нужды изобретать велосипед. Как показывают два других ответа, уже существует множество плагинов для проверки. Возможно, вы также могли бы просто посмотреть исходный код этих плагинов, если вам интересно, как это работает... или в этот ТАК вопрос.   -  person Kiruse    schedule 06.10.2014

Ответы (3)


arrow_upward
2
arrow_downward

вы можете сделать что-то вроде этого: -

$(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);
 };

или если вы хотите показать то же сообщение, вы можете сделать это: -

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

Демо

person Mohit Kumar    schedule 06.10.2014
comment
:Если я использую ваш код как есть, то мне нужно использовать следующую строку кода из HTML: onclick='$(#formzip).submit();' Или я должен пропустить этот файл? - person PHPFan; 06.10.2014
comment
вы не должны использовать, потому что в текстовом поле вы должны использовать кнопку или отправить - person Mohit Kumar; 06.10.2014

arrow_upward
1
arrow_downward

Для этого не нужно использовать какую-либо пользовательскую библиотеку проверки. Сначала остановите событие отправки и запустите ваши правила проверки. Удалите событие onClick для элемента i.

Просто некоторые мысли. У другого человека может быть другой подход.

$(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
}

});

});
});
person Rajitha Bandara    schedule 06.10.2014

arrow_upward
0
arrow_downward

Я надеюсь, что приведенный ниже контент и ссылки помогут вам

http://jqueryvalidation.org/

и просмотрите демо из

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

person VishalDream    schedule 06.10.2014