简单的表单跳过验证/发送，直接进入ajax消息

Question

I have been following this tutorial to validate a form on a HTML5 template I am working on modifying. Here is the link: http://englishpearls.net/dev/contact.html

As you see, the form goes straight to the ajax message and skips everything else. What am I doing wrong?

HTML

<div id="contact_form">
    <form method="post" action="contact-post.html" >
    <div class="to">
        <input id="name" for="name" type="text" class="text" value="Name" name="userName" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
        <label class="error" for="name" id="name_error">This field is required.</label>
        <input id="email" type="text" class="text" value="Email" name="userEmail" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" style="margin-left: 10px">
        <label for="email" class="error" for="email" id="email_error">This field is required.</label>
    </div>
    <div class="to">
        <input id="phone" for="phone" type="text" class="text" value="Phone" name="userPhone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
        <label class="error" for="phone" id="phone_error">This field is required.</label>
        <input id="subject" type="text" class="text" value="Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Subject';}" style="margin-left: 10px">
        <label class="error" for="subject" id="subject_error">This field is required.</label>
    </div>
    <div class="text">
        <textarea id="message" value="Message:" name="userMsg" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message:</textarea>
        <label class="error" for="message" id="message_error">This field is required.</label>
    </div>
    <div>
        <input class="button" type="submit" value="Submit" name="submit" />
    </div> 
</div>

Jquery EDIT: Updated Script

    <script type="text/javascript">

            $(function() {
  $('.error').hide();
  $(".button").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#name").val();
      if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
      var email = $("input#email").val();
      if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
      var phone = $("input#phone").val();
      if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }
     var subject = $("input#subject").val();
      if (subject == "") {
      $("label#subject_error").show();
      $("input#subject").focus();
      return false;
    }
     var message = $("input#message").val();
      if (message == "") {
      $("label#message_error").show();
      $("input#message").focus();
      return false;
    }

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message;
//alert (dataString);return false;
$.ajax({
  type: "POST",
  url: "contact-post.html",
  data: dataString,
  success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='web/images/check.jpg' />");
    }); 
  }
});
return false; 

  });

});


</script>

Without the validation script, the email sends fine. Thanks!

Answer 1

The way your script is setup right now, the AJAX call will fire immediately, regardless of any input. It needs to be inside of this:

$(".button").click(function () { }

function, which should have an if statement that will only allow the AJAX to fire if the validation of the form is successful.

Updated:

<div id="contact_form">
    <form id="contact-post" method="post" action="contact-post.html" >
    <div class="to">
        <input id="name" for="name" type="text" class="text" placeholder="Name" name="userName" >
        <label class="error" for="name" id="name_error">This field is required.</label>
        <input id="email" type="text" class="text" placeholder="Email" name="userEmail" style="margin-left: 10px">
        <label for="email" class="error" for="email" id="email_error">This field is required.</label>
    </div>
    <div class="to">
        <input id="phone" for="phone" type="text" class="text" placeholder="Phone" name="userPhone" >
        <label class="error" for="phone" id="phone_error">This field is required.</label>
        <input id="subject" type="text" class="text" placeholder="Subject"style="margin-left: 10px">
        <label class="error" for="subject" id="subject_error">This field is required.</label>
    </div>
    <div class="text">
        <textarea id="message" placeholder="Message:" name="userMsg">Message:</textarea>
        <label class="error" for="message" id="message_error">This field is required.</label>
    </div>
    <div>
        <input class="button" type="submit" value="Submit" name="submit" />
    </div> 

JS:

<script type = "text/javascript">

    $(function () {
        $('.error').hide();
        $("#contact-post").submit(function (event) {
            alert("submitted");
            event.preventDefault();
           // validate and process form here
            $('.error').hide();
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var subject = $("input#subject").val();
            var message = $("#message").val();


            if (name == "") {
                $("label#name_error").show();
                $("input#name").focus();
            } else if (email == "") {
               $("label#email_error").show();
               $("input#email").focus();
            } else if (phone == "") {
                $("label#phone_error").show();
                $("input#phone").focus();
            } else if (subject == "") {
                $("label#subject_error").show();
                $("input#subject").focus();
            } else if (message == "") {
                $("label#message_error").show();
                $("input#message").focus();
            } else {
                var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message;
                $.ajax({
                    type: "POST",
                    url: "app/contact.php",
                    data: dataString,
                    success: function () {
                        $('#contact_form').html("<div id='message'></div>");
                        $('#message').html("<h2>Contact Form Submitted!</h2>")
                        .append("<p>We will be in touch soon.</p>")
                        .hide()
                        .fadeIn(1500, function () {
                            $('#message').append("<img id='checkmark' src='web/images/check.jpg' />");
                        });
                    }
                });  
            }
       });
    });
< /script>

That will work. Also I changed all of the value attributes in your HTML to placeholder attributes so they function as expected and don't get in the way of the validation.

Alternatively, since you're already using jQuery, you could check out jQuery Validate , a jQuery plugin that would make this much simpler

UPDATE:

I removed all of the onfocus/onblur attributes from your HTML and it works now. The JS in the onblur tags was filling the form with values, so it was able to pass validation. Look at this JSFIDDLE for a working verison

UPDATE 2:

The var message = $("input#message").val() should be var message = $("#message").val() . The first one is looking for an input with the id of "message", where as you have a textarea with that id. Changing this line will correct the blank message you're getting. (see the updated JS above)

Regarding this question,

I have noticed that in the first link I have the $(".button").submit(function (event) whereas in your config, in the same spot you have $("#contact-post").submit(function (event)

I have the validation being performed when a form with the id of "contact-post" gets submitted, instead of when the button gets submitted (which isn't possible). The reason the page with this JS/form is submitting is that the JS to validate never gets triggered.

It's possible (although unlikely) to submit the form without clicking that button, so we don't want the validation to be skipped on the off-chance that happens.

Answer 2

You could try adding "return true;" to the .click

$(".button").click(function () { 
   //...
   //validation code
   //...
   //return true if passes validation
  return true; 
}

Answer 3

Have you thought about combining things like this:

$('yourForm').on('submit', function(event){
    if ( formIsvalid() ) {
      $.ajax({
          ...
        });
    } else {
        // Do something else maybe?
    }
    event.preventDefault();
});

// Form validation.
function formIsvalid() {
  ... form validation here...
  return true;
}