Javascript Проверить при изменении ввода, отправлять только при нажатии кнопки «Отправить» - PullRequest
1 голос
/ 02 марта 2012

У меня есть форма на моем сайте. Когда нажата кнопка отправки, запускается функция, чтобы получить содержимое каждого поля, проверить содержимое на основе RegEx и других требований, а затем, если все выглядит нормально, форма отправляется через Ajax почтовому клиенту .php.

Я бы хотел, чтобы форма автоматически проверялась при изменении значений поля ввода, ИЛИ, когда поле ввода теряет фокус (у меня нет предпочтений, либо было бы замечательно) пользователь нажимает кнопку «Отправить» в форме. Если пользователь нажимает кнопку «Отправить», ДО того как все поля действительны, я НЕ хочу, чтобы форма отправлялась.

Вот мой код:

    //contact form validation   
$(function(){
    $('.error').hide();
    // hide error messages onchange
    $("#contact-form").change(function(){
        $('.error').hide(); 
        $("label#name_error").hide(); 
        $("label#invalid_error").hide(); 
        $("label#email_error").hide(); 
        $("label#invalid_phone_error").hide(); 
        $("label#phone_error").hide(); 
        $("label#zip_error").hide();
    });

    // validate fields on click
    $(".cool-button").click(function(){
        $('.error').hide(); 
        $("label#name_error").hide(); 
        $("label#invalid_error").hide(); 
        $("label#email_error").hide(); 
        $("label#invalid_phone_error").hide(); 
        $("label#phone_error").hide(); 
        $("label#zip_error").hide(); 

        var name=$("input#contact_name").val();
        var email=$("input#contact_email").val();
        var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/
        var phone=$("input#contact_phone").val();
        var phone=phone.replace(/\s+-/g, "");
        var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/
        var zip=$("input#contact_zip").val();
        var best_time=$("input#contact_best_time").val();
        var message=$("textarea#contact_message").val();
        var timestamp=$("input#timestamp").val();

        if(name==""){
            $("label#name_error").show();
            $("input#contact_name").focus();return false;
            }
        if(email==""){
            $("label#email_error").show();
            $("input#contact_email").focus();return false;
            }
        if (document.getElementById('contact_email').value.search(emailRegEx )==-1) {
            $("label#invalid_error").show();
            $("input#contact_email").focus();return false;
            }
        if(phone==""){
            $("label#phone_error").show();
            $("input#contact_phone").focus();return false;
            }
        if (document.getElementById('contact_phone').value.search(phoneRegEx )==-1) {
            $("label#invalid_phone_error").show();
            $("input#contact_phone").focus();return false;
            }
        if(zip==""){
            $("label#zip_error").show();
            $("input#contact_zip").focus();return false;
            }
        if(message==""){
            $("label#message_error").show();
            $("textarea#contact_message").focus();return false;
            }
        else {
var dataString='contact_name='+name+'&contact_email='+email+'&contact_phone='+phone+'&contact_zip='+zip+'&contact_best_time='+best_time+'&timestamp='+timestamp+'&contact_message='+encodeURIComponent(message);
    $.ajax({
        type:"POST",
        url:"php/contact.php",
        data:dataString,
        success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}});
        }
        return false;
    });

});

И ЗДЕСЬ КОД HTML И PHP ДЛЯ ФОРМЫ

<form id="contact-form" method="post" action="#">
                          <p class="form-subscr-field">
                            <label for="contact_name" id="contact_name_label">Your name: *</label>
                            <input id="contact_name" type="text" name="contact_name" class="inputbox" size="10" required/>
                            <label class="error error-tip" for="contact_name" id="name_error" style="display: none; ">Please enter your name.</label>
                          </p>
                          <p class="form-subscr-field">
                            <label for="contact_email" id="contact_email_label">E-mail Address: *</label>
                            <input id="contact_email" type="email" name="contact_email" class="inputbox" size="10" required/>
                            <label class="error error-tip" for="contact_email" id="email_error" style="display: none; ">Please enter your email address.</label>
                            <label class="error error-tip" for="contact_email" id="invalid_error" style="display: none; ">Invalid email address.</label>
                          </p>
                          <fieldset class="w50">
                          <p class="form-subscr-field rowElem left">
                            <label for="contact_phone" id="contact_phone_label">Phone: *</label>
                            <input id="contact_phone" type="tel" name="contact_phone" class="inputbox"  size="10" required minlength="9"/>
                            <label class="error error-tip" for="contact_phone" id="phone_error" style="display: none; ">Please enter your phone number.</label>
                            <label class="error error-tip" for="contact_phone" id="invalid_phone_error" style="display: none; ">Please enter a valid phone number.</label>
                          </p>
                           </fieldset>
                           <fieldset class="w50">
                          <p class="form-subscr-field rowElem right">
                            <label for="contact_zip" id="contact_zip_label">Zip Code: *</label>
                            <input id="contact_zip" type="text" name="contact_zip" class="inputbox"  size="10" required minlength="5"/>
                            <label class="error error-tip" for="contact_zip" id="zip_error" style="display: none; ">Please enter your shipping zip code.</label>
                          </p>
                           </fieldset>
                          <p class="form-subscr-field">
                            <label for="contact_best_time" id="contact_best_time_label">Best time to Contact:</label>
                            <input id="contact_best_time" type="text" name="contact_best_time" class="inputbox"  size="10" />
                          </p>
                          <p class="form-subscr-field">
                            <label for="contact_message" id="comment_label">Your message: *</label>
                            <textarea id="contact_message" name="contact_message" rows="8" cols="30" required minlength="2"></textarea>
                            <label class="error error-tip" for="contact_message" id="message_error" style="display: none; ">This field is required.</label>
                          </p>
                          <input type="hidden" id="timestamp" name="timestamp" value="<?php
$hourdiff = "2"; // hours diff btwn server and local time
$insertdate = date("l, d F Y h:i a",time() + ($hourdiff * 3600));
print ("$insertdate");
?>" />
                          <div class="submit-contact">
                            <p>
                              <input type="submit" name="submit" class="cool-button csbutton-color spot-action" id="contact_button" value="Submit" />
                            </p>
                          </div>
                        </form>

Ответы [ 3 ]

0 голосов
/ 02 марта 2012

Обычно это достигается с помощью функции keyup.Всякий раз, когда вы отпускаете клавишу, можно вызывать функцию, чтобы убедиться, что все поля являются точными, и если это так, оставьте пользователя незаметным для пользователя.В вашем случае вы можете отключить кнопку отправки, если все поля не будут правильными.

Примечание. Никогда не изменяйте редактируемые в настоящее время текстовые поля с помощью этой функции или делайте что-либо еще, что может раздражатьпользователь;)


Редактировать: я изменил код для проверки каждый раз, когда клавиша поднимается для всех полей ввода.Я не владею JQuery, поэтому я сделал это с ванильным Javascript.Если нужно, конвертировать должно быть довольно легко.

$(function(){


  var inputs = document.getElementsByTagName("input");

  for(var i = 0; i < inputs.length; i++) {

    inputs[i].addEventListener("keyup", function(){validate()}, true);

  }


  $('.error').hide();
  $(".cool-button").click(function(){validate()});

  function validate() {
                          $('.error').hide(); 
                          $("label#name_error").hide(); 
                          $("label#invalid_error").hide(); 
                          $("label#email_error").hide(); 
                          $("label#invalid_phone_error").hide(); 
                          $("label#phone_error").hide(); 
                          $("label#zip_error").hide(); 

                          var name=$("input#contact_name").val();
                          var email=$("input#contact_email").val();
                          var emailRegEx =/^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/
                          var phone=$("input#contact_phone").val();
                          var phone=phone.replace(/\s+-/g, "");
                          var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/
                          var zip=$("input#contact_zip").val();
                          var best_time=$("input#contact_best_time").val();
                          var message=$("textarea#contact_message").val();
                          var timestamp=$("input#timestamp").val();

                          if(name==""){
                          $("label#name_error").show();$("input#contact_name").focus();return false;
                          }
                          if(email==""){
                          $("label#email_error").show();$("input#contact_email").focus();return false;
                          }
                          if (document.getElementById('contact_email').value.search(emailRegEx )==-1) {
                          $("label#invalid_error").show();$("input#contact_email").focus();return false;
                          }
                          if(phone==""){
                          $("label#phone_error").show();$("input#contact_phone").focus();return false;
                          }
                          if (document.getElementById('contact_phone').value.search(phoneRegEx )==-1) {
                          $("label#invalid_phone_error").show();$("input#contact_phone").focus();return false;
                          }
                          if(zip==""){
                          $("label#zip_error").show();$("input#contact_zip").focus();return false;
                          }
                          if(message==""){
                          $("label#message_error").show();$("textarea#contact_message").focus();return false;
                          }
                          else {
                          var dataString='contact_name='+name+'&contact_email='+email+'&contact_phone='+phone+'&contact_best_time='+best_time+'&contact_zip='+zip+'&timestamp='+timestamp+'&contact_message='+encodeURIComponent(message);
                          $.ajax({
                                 type:"POST",
                                 url:"php/contact.php",
                                 data:dataString,
                                 success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}});
                          }
                          return false;
                          };
  });
0 голосов
/ 03 марта 2012

Я склонен ломать валидацию для каждого ввода, что значительно облегчает этот процесс.Вы также можете использовать плагин jQuery, который, вероятно, будет более модульным в долгосрочной перспективе.

Тем не менее, я бы сделал это так ( работает jsFiddle ):

//contact form validation 
$(function() {
    $('.error').hide(); //hide all errors
    function fieldHasValue(field, label) {
        var value = field.val().trim(); //Grab value without leading or trailing whitespace
        if (value.length > 0) {
            label.hide();
        } else {
            label.show();
            field.focus();
        }
        return (value.length > 0);
    }
    function nameIsValid() {
        return fieldHasValue($("input#contact_name"), $("label#name_error"));
    }
    function emailIsValid() {
        var email = $("input#contact_email").val().trim(); //Grab value without leading or trailing whitespace
        var emailRegEx = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._\-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/;
        var isValid = (email.length > 0) && email.match(emailRegEx);
        if (isValid) {
            $("label#email_error").hide();
            $("label#invalid_error").hide();
        } else if (email.length > 0) {
            $("label#invalid_error").show();
            $("input#contact_email").focus();
        } else {
            $("label#email_error").show();
            $("input#contact_email").focus();
        }
        return isValid;
    }
    function phoneIsValid() {
        var phone = $("input#contact_phone").val().replace(/\s+-/g, "").trim(); //Grab value without leading or trailing whitespace and replace [whitespace -] with an empty string.
        var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/;
        var isValid = (phone.length > 0) && phone.match(phoneRegEx);
        if (isValid) {
            $("label#invalid_phone_error").hide();
            $("label#phone_error").hide();
        } else if (phone.length > 0) {
            $("label#invalid_phone_error").show();
            $("input#contact_phone").focus();
        } else {
            $("label#phone_error").show();
            $("input#contact_phone").focus();
        }
        return isValid;
    }
    function zipIsValid() {
        return fieldHasValue($("input#contact_zip"), $("label#zip_error"));
    }
    function messageIsValid() {
        return fieldHasValue($("textarea#contact_message"), $("label#message_error"));
    }
    function bestTimeIsValid() {
        return fieldHasValue($("input#contact_best_time"), $("label#best_time_error"));
    }
    function allInputsAreValid() {
        var validName = nameIsValid();
        var validEmail = emailIsValid();
        var validPhone = phoneIsValid();
        var validZIP = zipIsValid();
        var validMessage = messageIsValid();
        var validBestTime = bestTimeIsValid();
        var isValid = validName && validEmail && validPhone && validZIP && validMessage && validBestTime;
        return isValid;
    }
    $("input#contact_name").on('change blur', nameIsValid);
    $("input#contact_email").on('change blur', emailIsValid);
    $("input#contact_phone").on('change blur', phoneIsValid);
    $("input#contact_zip").on('change blur', zipIsValid);
    $("textarea#contact_message").on('change blur', messageIsValid);
    $("input#contact_best_time").on('change blur', bestTimeIsValid);
    $("input#contact_button").on('click', function (e) {
        var timestamp = $("input#timestamp").val();

        if (allInputsAreValid()) {
            var dataString = 'contact_name=' + name + '&contact_email=' + email + '&contact_phone=' + phone + '&contact_zip=' + zip + '&contact_best_time=' + best_time + '&timestamp=' + timestamp + '&contact_message=' + encodeURIComponent(message);
            $.ajax({
                type: "POST",
                url: "php/contact.php",
                data: dataString,
                success: function() {
                    $('#contact-form').html("<div id='message'></div>");
                    $('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800, function() {
                        $('#message').append("<img id='checkmark' src='images/submit2.png' />");
                    });
                }
            });
        }
        e.preventDefault();
        return false;
    });
});
0 голосов
/ 02 марта 2012

Вы должны использовать какой-нибудь плагин валидатора.Лично я использовал инструменты проверки формы jquery, и это прекрасно работает. Есть и другие.Проверьте это: http://flowplayer.org/tools/validator/

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

http://jquery.malsup.com/form/

Это один пример.Это позволяет вам создать форму в обычном html-формате, и она будет отправлять форму в URL-адрес действия формы, а также будет формировать значения форм так же, как браузер, если вы отправляете без ajax.Таким образом, независимо от того, к какому бэкэнд-скрипту вы добавляете поля формы, точно так же, как если бы вы не использовали ajax.

Поскольку это кажется слишком большой работой для вас, позвольте мне показать вам, как выглядит ваш код с и безit.

Без (посмотрите выше на ваши js).

Не предполагая, что ваша форма выглядит так (упрощенно)

<form method="POST" action="php/contact.php">
  <label for="contact_name">Name</label>
  <input name="contact_name" id="contact_name" />
  <br />
  <label for="contact_email">Email</label>
  <input name="contact_email" id="contact_email" />
  <br />
  <label for="contact_phone">Phone</label>
  <input name="contact_phone" id="contact_phone" />
  <br />
  <label for="contact_zip">Zip</label>
  <input name="contact_zip" id="contact_zip" />
  <br />
  <label for="contact_best_time">Best time for Contact</label>
  <input name="contact_best_time" id="contact_best_time" />
  <br />
  <label for="contact_message">Message:</label>
  <input name="contact_message" id="contact_message" />
</form>

Теперь это, вероятно, похоже на то, как это выглядиткак сейчас без всего лишнего html для форматирования.

Если вы использовали как валидатор, так и валидатор формы ajax, вам вряд ли придется вносить какие-либо изменения.Позвольте мне показать их.

С формой валидатора и AJAX вы получите:

<form method="POST" action="php/contact.php" class="use-validator ajax-form">
  <label for="contact_name">Name</label>
  <input name="contact_name" id="contact_name" />
  <br />
  <label for="contact_email">Email</label>
  <input name="contact_email" id="contact_email" type="email" required="required" />
  <br />
  <label for="contact_phone">Phone</label>
  <input name="contact_phone" id="contact_phone" type="phone" />
  <br />
  <label for="contact_zip">Zip</label>
  <input name="contact_zip" id="contact_zip" required="required" />
  <br />
  <label for="contact_best_time">Best time for Contact</label>
  <input name="contact_best_time" id="contact_best_time" required="required" />
  <br />
  <label for="contact_message">Message:</label>
  <textarea name="contact_message" id="contact_message" required="required"></textarea>
</form>

Тогда ваш js будет:

$.tools.validator.fn("[type=phone]", "Invalid phone number", function(input, value) {   
   var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/ 
   return value.test(phoneRegEx);
});

$("form.use-validator").validator();

$("form.ajax-form").ajaxForm({
 success:function(){$('#contact-form').html("<div id='message'></div>");$('#message').html("<h3>Message Sent</h3>").append("<p>Thank you for contacting us. We'll be in touch. <br /><br />If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473</p>").hide().fadeIn(800,function(){$('#message').append("<img id='checkmark' src='images/submit2.png' />");});}});
});

И любой другойВалидаторы, которые вы делаете, вы можете использовать в других формах ..

И тогда вам могут потребоваться некоторые пользовательские сообщения об ошибках, но это все .. Вы можете удалить весь этот другой код js, который у вас есть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...