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表單必需的命令不起作用？