jQuery-表单在Alertify收到确认框值之前提交(使用HTML5) [英] jQuery - Form submits before alertify receives confirm box value (with HTML5)

问题描述

我有一个包含2个字段的表单，其中之一是必填字段.我使用了HTML5 必需属性来检查提交期间该字段是否被填充.

I have a form with 2 fields, one of which is required. I used HTML5 required attribute to check if the field is filled up during submission.

<form id ='reg' name='reg' action='here.php' method='post'>
    <input type='text' id='name' name='name' placeholder='Name' value='' required="true" />
    <input type='text' id='contactno' name='contactno' placeholder='Contact No' value='' />
    <input type='submit' value='Register' name='register' id='register' /> 
</form>

在表单实际提交之前，我想显示一个确认框(使用 alertify jQuery插件)提示用户提交.如果用户单击确定"，则应提交表单.否则，它不应该.提交事件触发后，我将以下代码用于确认框的检查:

Before the form actually submits, I want to show a confirm box (using alertify jQuery plugin) to prompt the user for a submission. If a user clicks OK, the form should submit. Otherwise, it should not. I used this code for the confirm box checking once the submit event fires:

$("#reg").submit(function() 
{
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) 
    {
        if (e) {
            // user clicked "ok"
            alertify.success("You've confirmed your reservation.");
            return true;
        } else {
            // user clicked "cancel"
            alertify.error("You did not confirm your reservation.");
            return false;
        }
    });
});

问题是，表单不等待用户的回答，而是立即提交.我在此处尝试了这个建议，似乎可以第一的.我将html按钮类型替换为按钮"，并将jQuery代码替换为:

Problem is, the form doesn't wait for the user's answer and submits immediately. I tried the suggestion here, which seems ok at first. I replaced the html button type to 'button' and replaced the jquery code to this:

$("#register").click(function() 
{
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) 
    {
        if (e) {
            // user clicked "ok"
            alertify.success("You've confirmed your reservation.");
            $("#reg").submit();
            return true;
        } else {
            // user clicked "cancel"
            alertify.error("You did not confirm your reservation.");
            return false;
        }
    });
});

这个问题是我为其中一个字段提供了required ='true'属性，如果该字段为空，这应该阻止表单提交.如果用户在确认框中单击确定"，则即使在必填字段为空的情况下，上面的代码也允许提交.

The problem with this one is that I have a required='true' attribute for one of the fields, which should prevent the form from submitting if the field is empty. The code above allows submission if the user clicks OK in the confirmation box even if the required field is still empty.

我想在显示对话框之前先检查该字段是否已填写，然后等待用户的回答，然后决定是否提交.关于如何使它正常工作的任何建议?提前致谢！ :)

I want to check first if the field is filled up before it shows the dialog, then wait for the user's answer and then decide whether to submit it or not. Any suggestions on how I could get this working? Thanks in advance! :)

推荐答案

阻止始终提交，然后单击确定手动提交表单.

prevent submit always, then manually submit the form on clicking ok.

$("#reg").submit(function(event){
    event.preventDefault(); // cancel submit
    alertify.confirm("Are you sure you want to commit your reservation?", function (e) {
        if (e) {
            // user clicked "ok"
            alertify.success("You've confirmed your reservation.");
            $("#reg")[0].submit(); // submit form skipping jQuery bound handler
        } else {
            // user clicked "cancel"
            alertify.error("You did not confirm your reservation.");
        }
    });
});

也更改为一个提交事件，而不是单击，因为这实际上是您想要的，否则必选属性是无用的.

Also changed to a submit event rather than click as that's actually what you want, otherwise the required attribute is useless.

您几乎不需要在提交按钮上使用click事件.只需绑定到表单的Submit事件.

You rarely ever need to use a click event on a submit button. Just bind to the form's submit event.

这篇关于jQuery-表单在Alertify收到确认框值之前提交(使用HTML5)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！