HTML5中的表单验证不起作用

Question

嗨，您能看看我的HTML和功能吗？ 必填字段无效。 有什么想法吗？

  <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>

这是我的功能。 我不确定为什么它没有将其作为必填字段。我自己尚未创建此表单，但正在尝试以某种方式进行处理。 谢谢

  (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

尝试将参数传递给您的匿名函数

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

Answer 2

您可以尝试执行匿名函数，例如：

(function($){


 //Your code

}.call(this));

如果问题没有解决，请创建小提琴

Answer 3

应该调用匿名函数来执行：

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

用于在函数结束后立即调用匿名函数use（），并传递jQuery参数。

Answer 4

从您的JavaScript中删除第一行和最后一行。

(function($){

和

});

它将代码包装到一个不会被调用的匿名函数中，因此您不会将click事件绑定到Submit按钮。

Answer 5

它在Firefox和Chrome中都可以正常工作。如果仍然无法正常工作，您可以检查一下

HTML表单必需的命令不起作用？