Проверка Jquery для формы регистрации водителя HTML - PullRequest
Новая
       14

Проверка Jquery для формы регистрации водителя HTML

0 голосов
/ 12 мая 2011

Привет сделать один HTML, из которого отправка без обновления с помощью jquery.Проблема в том, что я новичок, и я не знаю, как добавить проверку для HTML-формы.Мне нужны изменения в скрипте, поэтому первая форма будет проверена с помощью jquery или ajax, а затем будет отправлена ​​с помощью jquery без обновления страницы. Посмотрите в моем коде.Пожалуйста, предоставьте мне рабочее решение в этой первой форме, подтвердите с помощью ajax jquery, затем отправьте с помощью jquery без обновления. Заранее спасибо

JQUERY: 

<script type="text/javascript"> 
$(document).ready(function(){
    $("form#form").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString =  'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;


        $.ajax({
            type: "POST",
            url: "addd.php",
            data: dataString,
            success: function(){
                 $('form#form').hide(function(){$('div.success').fadeIn();});
            }
        });
    return false;
    });
});
</script>

ФОРМА HTML: 

<form id="form" method="post" name="form" action=""> 
              <fieldset id="opt">

                        <legend>Driver Information</legend>

                        <label for="choice">Name : </label>
                        <input type="text" id="name" name="name" value=""> <br />
                        <label for="choice">Licence No : </label>
                        <input type="text" id="licence" name="licence" value=""> <br />
                        <label for="choice">Email : </label>
                        <input type="text" id="email" name="email" value=""> <br />
                        <label for="choice">Phone : </label>
                        <input type="text" id="phone" name="phone" value=""> <br />


                       <input type="hidden" name="uno" id="uno" value="" /> 
                        <br />
                         </fieldset>
                      <div align="center">

                       <input id="button2" type="submit" value="Add Driver" />  
                      <input id="button2" type="reset" />
                      </div>
                    </form>

1 Ответ

0 голосов
/ 12 мая 2011

Я обнаружил несколько ошибок в вашей HTML-форме. некоторые из них я хочу упомянуть ..

  • for атрибут label имеет то же значение следующего идентификатора ввода / выбора, читается:

    http://www.w3schools.com/tags/att_label_for.asp

  • Не присваивайте имя для атрибута name и id, это вводит в заблуждение. (Хорошая практика)

  • Не пишите value ="", если у вас нет начального значения какого-либо поля ввода.
  • Если вы хотите проверить скрытое поле, напишите какое-то значение для этого при инициализации формы, в противном случае оно всегда будет пустым, и ваша проверка никогда не будет работать.

  • Если вы хотите проверить все поля ввода вместе на пустоту, используйте селектор :input, читайте:

    http://api.jquery.com/input-selector/

  • Не забудьте подтвердить адрес электронной почты

  • Если вы хотите опубликовать форму через ajax, вам не нужно писать method и action атрибут в вашей форме
  • Ваша кнопка сброса должна иметь некоторое значение, в противном случае она принимает значение по умолчанию.

Очень полезная и удобная статья для новичка по проверке jquery ajax

http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition

ИЛИ вы можете использовать плагин валидатора jquery:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

вот ваша аккуратная и чистая форма 

<form id="driverForm" name="driverForm"> 
    <fieldset id="opt">
        <legend>Driver Information</legend>
        <label for="lname">Name : </label>
        <input type="text" id="lname" name="lname" > <br />
        <label for="licence">Licence No : </label>
        <input type="text" id="licence" name="licence" ><br />
        <label for="email">Email : </label>
        <input type="text" id="email" name="email" ><br />
        <label for="phone">Phone : </label>
        <input type="text" id="phone" name="phone" > <br />
        <input type="hidden" name="uno" id="uno"  /><br />
    </fieldset>
    <div align="center">
        <input type="submit"  id="submitForm" name="submitForm" value="Add Driver" />  
        <input type="reset" value="clear" />
    </div>
</form>

Надеюсь, это будет полезно для вас.

UPDATE

Поместите это вместо submit() и до ajax вот так 

$("form").submit(function() {
if($('#lname').val() == '')
            return false;
});

$.ajax({

ПРИМЕЧАНИЕ: не создавать dataString Вручную есть встроенная функция в jQuery.

сериализации

Обратите внимание, что это не имеет значения, отправляет ли ваша форма или нет. Самое главное, это действительная форма или нет.

Рад помочь :) 1079 *

...