HTML5中的表单验证不起作用

Question

Hi Could you please have a look at my HTML and function? The required field doesn't work. Any ideas why?

  <form  action='contact_form.php' method='post' class="contactForm">
                    <div class="formSecWrap">
                        <input type="text" class="formField" title="Name" id="name"       name="name" value="" required/>
                        <input type="text" class="formField" title="Email" name="email" id="email" value="" required/>
                        <input type="text" class="formField" title="Phone" name="phone" id="phone" value="" required />
                        <input type="text" class="formField" title="Date &amp; Time" name="date" id="date" value="" required/>
                    </div>
                    <div class="formSecWrap formSecWrap2">
                        <textarea class="textarea formField" title="Message" name="message" id="message"></textarea>
                    </div>
                        <input class="button" id="submit-form" type="submit" name="submit" value="Send Message" />
                    <div id="success">

                    </div>
                </form>

And here is my function. I am not sure why it doesn't pick it up as a required fields.I have not created this form myself but was trying to work it out somehow. Thank you

  (function($){
$(document).ready(function() {
    $('#submit-form').click(function(e){

        e.preventDefault();
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        var name     = $('#name').val(),
            email    = $('#email').val(),
            phone    = $('#phone').val(),
            date     = $('#date').val(),
            message  = $('#message').val(),
            data_html,
            success = $('#success');

        if(name == "")
            $('#name').val('Please enter your name.');

        if(phone == "")
            $('#phone').val('Please enter your phone number.');

        if(date == "")
            $('#date').val('Please enter a date and time.');

        if(email == ""){
            $('#email').val('Your email is required.');
        }else if(reg.test(email) == false){
            $('#email').val('Invalid Email Address.');
        }

        if(message == "")
            $('#message').val('Message is required.');

        if(message != "" && name != "" && reg.test(email) != false) {
            data_html = "name=" + name + "&email="+ email + "&message=" + message + "&phone="+ phone + "&date="+ date;

            //alert(data_html);
            $.ajax({
                type: 'POST',
                url: '../contact_form.php',
                data: data_html,
                success: function(msg){

                    if (msg == 'sent'){
                        success.html('<div class="alert alert-success">Message <strong>successfully</strong> sent!</div>')  ;
                        $('#name').val('');
                        $('#phone').val('');
                        $('#email').val('');
                        $('#date').val('');
                        $('#message').val('');
                    }else{
                        success.html('<div class="alert alert-error">Message <strong>not</strong> sent! Please Try Again!</div>')  ; 
                    }
                }
            });

        }
        return false;
      });
});
   });

Answer 1

try to pass arguments to you anonymous function

(function($){
  //all that code
})(jQuery);

Answer 2

You can try executing the anonymous function something like:

(function($){


 //Your code

}.call(this));

Please create the fiddle if the problem does not get resolved

Answer 3

anonymous function should be called for execution:

(function($){
  //your code
})(jQuery);

for calling anonymous function use () right after the function ends, and pass jQuery parameter.

Answer 4

Remove the first and the last lines from your javascript.

(function($){

and

});

It wraps the code into an anonymous function which isn't invoked so you don't bind the click event to the submit button.

Answer 5

its working fine in both firefox and chrome.. Still if does not work you can check this out

HTML form required command not working?