JQuery验证 - 仅在验证完成时提交表单

Question

我正在处理一个联系表单，该表单使用jquery validate验证表单以确保输入的所有数据都是正确的。当我单击提交按钮时，一切都很好 - 出现验证错误消息以及确认消息已发送的确认消息。所以基本上它发送表格虽然所有字段都不完整。

我只希望在所有字段填写正确后提交表单。

我在下方提供了我的代码......

＆＃13;

＆＃13;

<script type="text/javascript">

// validate contact form
$(function() {
    $('.contactusform').validate({
        rules: {
            name: {
                required: true
            },
            telno: {
                required: true,
                number: true
            },
            email: {
                required: true,
                email: true
            },
            town: {
                required: true
            },
            device: {
                required: true
            },
            message: {
                required: true
            },
        
        },

        messages: {
            name: {
                required: "Please enter your full name."
            },
            telno: {
                required: "Please enter your phone number."
            },
            email: {
                required: "Please enter your email address."
            },
            town: {
                required: "Please enter your town."
            },
            device: {
                required: "Please select your device."
            },
            message: {
                required: "Please enter your message."
            },
        
        },
    
    })
});
</script>

<script>
$(document).ready(function(){

    $('.contactusform').validate();

    // grab the submits button ID. do not use <input type="submit"> inside the form. Use a button instead outside the form.
    $("#submit2").click(function()
    {
        // grab the forms ID
        $("#message").submit(function(e)
        {
            // add a loading image in place of your returning outcome
            $("#simple-msg").html("Sending...");

            // serialize/combine all submitted fields into an array
            var postData = $(this).serializeArray();

            // set url based of action
            var formURL = $(this).attr("action");

            // set ajax parameters
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {
                    $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>');

                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    $("#simple-msg").html('<p>Message failed to send. Please try again!</p>');
                }
            });
            e.preventDefault(); //STOP default action
            e.unbind();
        });

        $("#message").submit(); //SUBMIT FORM
    });

});
</script>

＆＃13;

＆＃13;

＆＃13;

也可以有人告诉我是否可以在提交成功时禁用提交按钮并清除输入到表单中的任何数据？

非常感谢你提前得到的所有帮助。

更新代码

＆＃13;

＆＃13;

<script type="text/javascript">
$(document).ready(function () {
    $('.contactusform').validate({
        rules: {
            name: {
                required: true
            },
            telno: {
                required: true,
                number: true
            },
            email: {
                required: true,
                email: true
            },
            town: {
                required: true
            },
            device: {
                required: true
            },
            message: {
                required: true
            }, //<---unnecessary, remove it
        },
        messages: {
            name: {
                required: "Please enter your full name."
            },
            telno: {
                required: "Please enter your phone number."
            },
            email: {
                required: "Please enter your email address."
            },
            town: {
                required: "Please enter your town."
            },
            device: {
                required: "Please select your device."
            },
            message: {
                required: "Please enter your message."
            }, //<---unnecessary, remove it

        },

        //Submit Handler Function
        submitHandler: function (form) {
        // add a loading image in place of your returning outcome
        $("#simple-msg").html("Sending...");
        // serialize/combine all submitted fields into an array
        var postData = $(this).serializeArray();
        // set url based of action
        var formURL = $(this).attr("action");
        $.ajax({
                type: "POST",
                url: formURL,
                data: postData,
                success:function(data, textStatus, jqXHR) {
                   $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                   $("#simple-msg").html('<p>Message failed to send. Please try again!</p>');
                }
            });
        }
    }); //<----missing ; in original code
});
</script>

＆＃13;

＆＃13;

＆＃13;

表格代码

＆＃13;

＆＃13;

<form name='message' id='message' class="contactusform" enctype="multipart/form-data" action="<?=admin_url()?>admin-post.php">

<?php
 if(isset($_SESSION['message']))
 {
 echo $_SESSION['message'];
 unset($_SESSION['message']);
 }
 ?>
    <input type="hidden" name="action" value="add_foobar">
    <input type="hidden" name="data" value="foobarid">
    <label>Full Name:</label>
    <input type="text" name="name" value="" required="">
    <label>Phone Number:</label>
    <input type="text" name="telno" id="telno">
    <label>Email Address:</label>
    <input type="email" name="email" value="" required="">
    <label>Town:</label>
    <input type="text" name="town" value="" required="">
    <label>Device:</label>
    <select name="device" value="" required="">
        <option selected="selected" value=""></option>
        <option value="Not Sure">Not Sure</option>
        <option selected="selected" value=""></option>
        <option value="iPhone 3G">iPhone 3G</option>
        <option value="iPhone 3GS">iPhone 3GS</option>
        <option value="iPhone 4G">iPhone 4G</option>
        <option value="iPhone 4S">iPhone 4S</option>
        <option value="iPhone 5">iPhone 5</option>
        <option value="iPhone 5C">iPhone 5C</option>
        <option value="iPhone 5S">iPhone 5S</option>
        <option value="iPhone 6">iPhone 6</option>
        <option value="iPhone 6 Plus">iPhone 6 Plus</option>
        <option selected="selected" value=""></option>
        <option value="MacBook">MacBook</option>
        <option value="MacBook Pro">MacBook Pro</option>
        <option value="MacBook Air">MacBook Air</option>
        <option selected="selected" value=""></option>
        <option value="iMac">iMac</option>
        <option selected="selected" value=""></option>
        <option value="iPad 1">iPad 1</option>
        <option value="iPad 2">iPad 2</option>
        <option value="iPad 3">iPad 3</option>
        <option value="iPad 4">iPad 4</option>
        <option value="iPad Air">iPad Air</option>
        <option value="iPad Air 2">iPad Air 2</option>
        <option value="iPad Mini 1">iPad Mini 1</option>
        <option value="iPad Mini 2">iPad Mini 2</option>
        <option value="iPad Mini 3">iPad Mini 3</option>
        <option selected="selected" value=""></option>
        <option value="iPod Classic">iPod Classic</option>
        <option value="iPod Mini">iPod Mini</option>
        <option value="iPod Nano">iPod Nano</option>
        <option value="iPod Shuffle">iPod Shuffle</option>
        <option value="iPod Touch">iPod Touch</option>
    </select>
    <label>Message:</label>
    <textarea name="message" cols="30" rows="4" value="" required=""></textarea>
    <input class="submit2" type='submit' id='submit' value='Send Message' />
</form>
<div id='simple-msg'></div>

＆＃13;

＆＃13;

＆＃13;

插件代码

＆＃13;

＆＃13;

<?php

if(!defined('WPINC'))
{
die;
}

// create table at plugin activition
register_activation_hook( __FILE__, 'jms_create_db' );
function jms_create_db() 
{
	global $wpdb;
	$charset_collate = $wpdb->get_charset_collate();
	$table_name=$wpdb->prefix.'contactusform';
	$sql="CREATE TABLE $table_name(
		id mediumint(9) NOT NULL AUTO_INCREMENT,
		time datetime DEFAULT NULL,
		name varchar(50) DEFAULT NULL,
        telno varchar(20) DEFAULT NULL,
		email varchar(75) DEFAULT NULL,
        town varchar(75) DEFAULT NULL,
        device varchar(75) DEFAULT NULL,
		message text,
		UNIQUE KEY id (id)
		) $charset_collate;";
	require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
	dbDelta( $sql );
}

//adding plugin to admin menu
add_action('admin_menu', 'jms_menu');
function jms_menu() 
{
 add_menu_page(__('Contact Form','jms'), __('Contact Form','jms'),
 	 'administrator', 'jms-contact-form', 'jms_settings_page', 'dashicons-email');
	function jms_settings_page() 
	 {
	 	global $wpdb;
	 	$table_name=$wpdb->prefix.'contactusform';
	 	$client_msg = $wpdb->get_results( 
			"
			SELECT *
			FROM $table_name
			"
		);
	 	require_once(plugin_dir_path(__FILE__).'settings-page.php');
	 }
	 
}

function cf_jms()
{
 ob_start();
 require_once(plugin_dir_path(__FILE__).'form.php');
 return ob_get_clean();
}
add_shortcode( 'jms_contact_form', 'cf_jms' );

//if you want to have both logged in and not logged in users submitting, you have to add both actions!
add_action( 'admin_post_add_foobar', 'jms_admin_add_foobar' );
add_action( 'admin_post_nopriv_add_foobar', 'jms_admin_add_foobar' );
function jms_admin_add_foobar() {
    global $wpdb;
    $data = array(
        'time'  => current_time('mysql'),
        'name'  => sanitize_text_field( $_POST['name']),
        'telno'  => sanitize_text_field( $_POST['telno']),
        'email' => isset( $_POST['email'] ) ? sanitize_email( $_POST['email']) : null,
        'town'  => sanitize_text_field( $_POST['town']),
        'device'  => sanitize_text_field( $_POST['device']),
        'message'   => sanitize_text_field( $_POST['message'])
    );

    $table_name = $wpdb->prefix.'contactusform';
    $headers = array( 'Content-Type: text/html; charset=UTF-8' );
    // send Email for admin
    wp_mail(
        get_option( 'admin_email' ),
        'Instant Qoute/Callback Form',
        'Time : ' . $data['time'] .
        'Name : ' . $data['name'] .
        'Tel No : ' . $data['telno'] .
        'Email : ' . $data['email'] .
        'Town : ' . $data['town'] .
        'Device : ' . $data['device'] .
        'The message: ' . $data['message'],         
        $headers
    );

    if ( $wpdb->insert( $table_name, $data ) ) {
        $_SESSION['message'] = "";
    } else {
        $_SESSION['message'] = "";
    }
    //redirect back to where user was comming
    wp_redirect( $_SERVER['HTTP_REFERER'] );
    //request handlers should die() when they complete their task
}

?>

＆＃13;

＆＃13;

＆＃13;

Answer 1

@Ahmad Baktash Hayeri的回答涵盖了几乎所有方面，所以这个答案的目的是使用submitHandler function，当使用插件时为什么不利用它让它为你做所有艰苦的工作。

我建议完全删除第二个脚本并使用submitHandler function并处理您的Ajax方法和其中的所有其他请求。

检查以下脚本，您有不必要的逗号并且缺少;

$(document).ready(function () {
    $('.contactusform').validate({
        rules: {
            name: {
                required: true
            },
            telno: {
                required: true,
                number: true
            },
            email: {
                required: true,
                email: true
            },
            town: {
                required: true
            },
            device: {
                required: true
            },
            message: {
                required: true
            }, //<---unnecessary, remove it
        },
        messages: {
            name: {
                required: "Please enter your full name."
            },
            telno: {
                required: "Please enter your phone number."
            },
            email: {
                required: "Please enter your email address."
            },
            town: {
                required: "Please enter your town."
            },
            device: {
                required: "Please select your device."
            },
            message: {
                required: "Please enter your message."
            }, //<---unnecessary, remove it

        },
        //Submit Handler Function
        submitHandler: function (form) {
        // add a loading image in place of your returning outcome
        $("#simple-msg").html("Sending...");
        // serialize/combine all submitted fields into an array
        var postData = $(this).serializeArray();
        // set url based of action
        var formURL = $(this).attr("action");
        $.ajax({
                type: "POST",
                url: formURL,
                data: postData,
                success:function(data, textStatus, jqXHR) {
                   $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                   $("#simple-msg").html('<p>Message failed to send. Please try again!</p>');
                }
            });
        }
    }); //<----missing ; in original code
});

现在最后重置表单并禁用提交按钮，不知道为什么要禁用提交按钮，

以下可以重置表单并禁用提交按钮

$(form)[0].reset();
$('#theSubmitButton').attr("disabled", true);

例如，如果要在Ajax成功函数之后重置表单并禁用按钮

success:function(data, textStatus, jqXHR) {
   $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>');
   $(form)[0].reset();
   $('#theSubmitButton').attr("disabled", true);
},

您不再需要的是第二个脚本，e-prevent default和submit function

如果在表单提交后按钮禁用并想要启用它，则可以在validate插件中使用以下代码段，因此一旦字段具有所有有效值，它将再次启用该按钮。

onkeyup: function( element, event ) {
   this.checkForm();
    if (this.valid()) { // checks form for validity
        $('#theSubmitButton').attr("disabled", false); //Button enable if all fields valid
    } else {
        $('#theSubmitButton').attr("disabled", true); //button will disbale if any field not valid
    }
},

编辑：

OP稍后添加了表单，因此HTML中需要进行更改

在<input class="submit2" type='button' id='submit' value='Send Message' />内移动<form></form>，将type='button'更改为type='submit'

<form name='message' id='message' class="contactusform" enctype="multipart/form-data" action="<?=admin_url()?>admin-post.php">
<?php
if(isset($_SESSION['message'])){
 echo $_SESSION['message'];
 unset($_SESSION['message']);
 }
?>
     <input type="hidden" name="action" value="add_foobar">
     <input type="hidden" name="data" value="foobarid">
     <label>Full Name:</label>
     <input type="text" name="name" value="" required="">
     <label>Phone Number:</label>
     <input type"=text" name="telno" id="telno">
     <label>Email Address:</label>
     <input type="email" name="email" value="" required="">
     <label>Town:</label>
     <input type"=text" name="town" value="" required="">
     <label>Device:</label>
     <select name="device" value="" required="">
        <option selected="selected" value=""></option>
        <option value="Not Sure">Not Sure</option>
        ....Rest of the option attributes
        <option value="iPod Touch">iPod Touch</option>
    </select>
    <label>Message:</label><textarea name="message" cols="30" rows="4" value="" required=""></textarea>
    <input class="submit2" type='submit' id='submit' value='Send Message' />
</form>
<div id='simple-msg'></div>

Fiddle

Answer 2

在调用ajax之前，检查您的表单是否有效

使用以下新代码更新您的代码：

if($('.contactusform').valid()){
        $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {
                    $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>');

                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                    $("#simple-msg").html('<p>Message failed to send. Please try again!</p>');
                }
            });
}

Answer 3

要解决您的问题，请注意以下事项：

1. 将两个脚本合并为一个，因为将它们放在不同的标签中完全没有意义。
2. 使用表单的ID或className，但最好的是ID。 [我的答案是假设.contactusform和#contactusform引用了DOM中的相同元素。
3. 不需要第二次调用.validate()方法（因此必须删除）。 [它可能会覆盖传入验证规则对象的.validate()方法的第一次调用。]

4.   

   //抓取提交按钮ID。不要在表格内使用。在表单外使用按钮。   $("#submit2").click(function() ...

   - 为什么不在表单中使用type='button'的按钮，阻止提交表单，以便您可以执行AJAX调用。

现在要在表单的submit事件上注册处理程序，请使用以下代码替换代码的最后一部分：

$("#contactusform").submit(function(e) //Note the registration of the submit event on the form and NOT a button
    {
        var theForm = this;    // reference to the form that raised the event
        // add a loading image in place of your returning outcome
        $("#simple-msg").html("Sending...");

        // serialize/combine all submitted fields into an array
        var postData = $(this).serializeArray();

        // set url based of action
        var formURL = $(this).attr("action");

        // set ajax parameters
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) 
            {
                $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>');

            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                $("#simple-msg").html('<p>Message failed to send. Please try again!</p>');
            }
        });
        e.preventDefault(); //STOP default action -- Is ok to be here, although changing the form submission button's type to `button` will do the same trick
        //e.unbind();   // Not necessary
    });

    //$("#message").submit(); //SUBMIT FORM --- No need for this again, not sure if '#message' is a form, but either way, by clicking the form submission button, you'll be triggering the submit event on the form.
});

1. 要在AJAX调用的成功处理程序中重置表单上的表单字段.reset()方法：

   theForm.reset();
   $('#theSubmitButton').attr('disabled', 'disabled'); // disable form submission when submission successfull.