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

【问题标题】：JQuery Validate - Submit form only when validation is completeJQuery Validate - 仅在验证完成时提交表单
【发布时间】：2015-10-10 16:24:36
【问题描述】：

我正在制作一个使用 jquery validate 验证表单的联系表单，以确保输入的所有数据都是正确的。当我单击提交按钮时，一切都很好 - 验证错误消息与确认消息一起出现，说明消息已发送。因此，尽管所有字段都不完整，但基本上它会发送表单。

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

我在下面包含了我的代码...

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

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

非常感谢您提前提供的所有帮助。

更新代码

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

表格代码

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

插件代码

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

?>

【问题讨论】：

您需要将该 Ajax 请求放入提交处理程序 submitHandler: function (form) { put Ajax call here and remove that 2nd script and do everything you want to do here inside submit handler}
我可以建议你不同的方式。如果您同意
@Joshua，你能分享一下你表单的 html 吗？

标签： php jquery validation

【解决方案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

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

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

【讨论】：

我已经删除了我的脚本并添加了您的建议 - 它不起作用 - 没有出现验证 - 我检查了控制台 - 没有错误，这很好但是我错过了一些东西 - 我有什么想法需要更改才能使其正常工作吗？我已将更新后的代码和表单代码添加到我的初始帖子中。
尝试将提交按钮类型从按钮更改为submit
更改了要提交的类型，但仍然无法正常工作。当我点击提交时，没有任何反应。
现在我喝了杯咖啡，这里有你的 HTML 和 input type="submit" jsfiddle.net/z97rv5ju/2 也会更新答案。
Shehary - 感谢您的帮助。验证工作正常，发送确认 - 您的消息已发送，但由于某种原因，该消息现在未保存在 Wordpress 管理员中。任何想法如何解决这一问题？我已经在原始帖子中包含了所有更新的代码。

【解决方案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>');
                }
            });
}

【讨论】：

@Shehary 和 Dinanath Thakur - 感谢您的建议 - 我都尝试了，但都无法工作 - 一起尝试了包括提交处理程序等。还有其他建议吗？提前致谢。
你能张贴你的表格吗？
不，我不能——我一定是做错了什么。您能否尝试解释更多我必须在您的代码之上包含的内容 - 提交处理程序等。
试试这个：if($('.contactusform').valid()){ $("#message").submit(); }
Dinanath 你能帮我一个忙，并使用我上面的代码并将你的解决方案添加到其中并将其发布在你的答案中，因为我不确定需要改变什么。谢谢。

【解决方案3】：

要解决您的问题，请注意以下几点：

将两个脚本合并为一个，因为将它们放在不同的标签中完全没有意义。
使用表单的ID 或className，但最好使用ID。 [对于答案，我假设 .contactusform 和 #contactusform 指的是 DOM 中的相同元素]。
不需要第二次调用.validate() 方法（因此必须删除）。 [它可能会使用传入的验证规则对象覆盖.validate() 方法的第一次调用。]
// 获取提交按钮 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.
});

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

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

【讨论】：