Подтвердить поле формы с помощью JQUERY

У меня есть поле формы с одним полем ввода.Подтвердить поле формы с помощью JQUERY

Как только пользователь завершает ввод текста, мне нужно сделать вызов ajax и проверить ввод данных на сервере.

Я устал от клавиатуры, фокусировки, нажатия клавиш и мыши, но, похоже, не работает должным образом. Может кто-нибудь предложить лучшие события клавиатуры, чтобы решить эту проблему. Если ввод пуст, сообщение об ошибке также должно быть показано.

источник

2012-05-28 Nil Pun

Вы можете показать нам свой скрипт – mgraph

Я бы предложил использовать проверку на стороне клиента. –

Почему вы не используете проверку jquery на самой странице http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/ –

события вы, вероятно, ищете это размытие() событие, которое вызывается, когда пользователь покидает поле ввода (нажав вкладку, или нажав на следующем входе, например)

Пример:

$(document).ready(function(){ 
     $('input#myInput').blur(function(){ 
      myValidator($(this), $(this).val()); 
     }); 
    }); 

    function myValidator($element, value) 
    { 
     // Example regex to sucessfully match a value of at least 4 digits 
     if (!value.match(/^[0-9]{4,}$/) 
     { 
      // In this case I'm adding an error class to the input, 
      // but feel free to do anything you like 
      $element.addClass('error'); 
     } 
    }

EDIT:

Проверка с помощью AJAX является очень плохой практикой, как можно было бы легко остановить запрос HTTP или отключить JavaScript цельные (и лично я стараюсь избегать ненужных HTTP-запросов).

Я рекомендую сначала проверить клиентскую сторону (только JavaScript/jQuery), а при отправке дважды проверить серверную сторону (с помощью PHP/ASP).

источник

2012-05-28 14:07:55

Событие onchange может быть тем, что вам нужно.

onchange прослушивает любые изменения, внесенные в значение входного элемента, тогда как ключевые события регистрируют только действия, выполняемые на клавиатуре (например, нажатие и отпускание Esc также является допустимым триггером).

Однако на самом деле я не задаю вопрос. Я думаю, что вы ищете регулярное выражение.

Регулярные выражения - это шаблоны, которые можно использовать для проверки того, соответствуют ли данные заданным условиям. Например:

'/[a-zA-Z0-9\-]{5, 10}/'

, которые могут быть использованы для определения текста только буквенно-цифровой и от 5 до 10 символов в длину. В этом случае он также позволяет использовать hypens (-).

Информация об этом может быть найдена в любом месте в Интернете.

Кроме того, подумайте, что вы не отправляете сообщения, вы задаете вопрос более подробно и добавите образец кода, который вы используете. Это, вероятно, вдохновит на более полезные ответы.

С наилучшими пожеланиями,

источник

2012-05-28 13:47:50 Digitalis

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 
<style type="text/css"> 
* { font-family: Verdana; font-size: 96%; } 
label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 
p { clear: both; } 
.submit { margin-left: 12em; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; } 
</style> 
    <script> 
    $(document).ready(function(){ 
    $("#commentForm").validate(); 
    }); 
    </script> 

</head> 
<body> 


<form class="cmxform" id="commentForm" method="get" action=""> 
<fieldset> 
    <legend>A simple comment form with submit validation and default messages</legend> 
    <p> 
    <label for="cname">Name</label> 
    <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> 
    </p> 
    <p> 
    <label for="cemail">E-Mail</label> 
    <em>*</em><input id="cemail" name="email" size="25" class="required email" /> 
    </p> 
    <p> 
    <label for="curl">URL</label> 
    <em> </em><input id="curl" name="url" size="25" class="url" value="" /> 
    </p> 
    <p> 
    <label for="ccomment">Your comment</label> 
    <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea> 
    </p> 
    <p> 
    <input class="submit" type="submit" value="Submit"/> 
    </p> 
</fieldset> 
</form> 
</body> 
</html>

или вы можете принять гораздо больше понятия из здесь: http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

источник

2012-05-28 13:49:00

http://jsfiddle.net/landau/zKrYS/

Я не совсем уверен, что «работает не так, как ожидалось», но вот пример.

$("form").on("submit", function(e) { 
    e.preventDefault(); 
    var val = $("input").val().trim(); 
    if (!val) { 
     alert("please fill in the field"); 
     return; 
    } 
    var jqxhr = $.ajax({ 
     url: "/echo/json/", 
     data: { 
      value: val 
     }, 
     type: "post" 
    }).done(function(data, status, xhr) { 
     console.log(data, status, xhr); 
    }); 
});

источник

2012-05-28 13:49:53 Trevor

Подтвердить поле формы с помощью JQUERY

ответ

Смежные вопросы