logo标签列表

点击两次提交按钮才能提交表单。

javascriptjqueryvalidationbutton
6

我有一个问题，就是以下代码中的用户输入提交后只有在点击两次提交按钮后才能成功发布信息。请看一下我的代码，告诉我是否需要做出任何更改。

<script>
function validate(form) {
    fail = validateName(form.name.value)
    fail += validateEmail(form.email.value)
    fail += validateCity(form.city.value)
    if (fail == "") {
        $(function () {
            $('#submitbtn').click(function (event) {
                event.preventDefault();
                var form = $(this).closest('form'),
                    action = form.attr('action');
                $.post(action, form.serialize(), function (data) {
                    $('#errors').html("You have been successfully subscribed to our newsletter.");
                })
            });
        });
    }
    else {
        document.getElementById('errors').innerHTML = fail;
    }
    return false
}
function validateName(field) {
    if (field == "") return "No name was entered.<br/>"
    else if (field.length < 3) return "Please enter a valid name.<br/>"
    else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
    return ""
}

function validateEmail(field) {
    if (field == "") return "No email was entered.<br/>"
    else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
    return ""
}

function validateCity(field) {
    if (field == "") return "No city was entered.<br/>"
    else if (field.length < 3) return "Please enter a valid city.<br/>"
    else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
    return ""
}
            
</script>


</head>

<body id="body-results-page">
    <div class="modalDialog" id="openModal">
        <div>
            <a class="close" href="#close" title="Close">X</a>
            
     <h2>Newsletter Sign-Up</h2>      

  <form action="" name="subscribe1" id="subscribe1" method="POST" autocomplete="off" onSubmit="return validate(this)">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>


<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>

<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>

<div id="buttons">
            <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"/>
            
            <button type="submit" name="submit" id="submitbtn" class="submitbtn" value="Submit this!">Subscribe Now!</button>
            
            <br style="clear:both;">
        </div>
<input type="hidden" name="MM_insert" value="subscribe1">
  </form>
2个回答
1
因为您在提交时调用了函数validate(form)，并在此之后将提交处理程序添加到按钮上，但没有调用它。
解决方案-在将点击提交处理程序附加到按钮后调用提交处理程序。
$('#submitbtn').click();

像这样
if (fail == "") {
    $(function () {
        $('#submitbtn').click(function (event) {
            event.preventDefault();
            var form = $(this).closest('form'),
                action = form.attr('action');
            $.post(action, form.serialize(), function (data) {
                $('#errors').html("You have been successfully subscribed to our newsletter.");
            })
        }).click();
    });
}

或者

最好不要附加提交处理程序，如果条件为真，请直接运行AJAX请求。

就像这样：

if (fail == "") {
        action = $(form).attr('action');
    $.post(action, $(form).serialize(), function (data) {
        $('#errors').html("You have been successfully subscribed to our newsletter.");
    })
}
我应该对我的代码做哪些更改？我还是不理解。 - user2788650
0

你不需要绑定提交处理程序。因为你在你的validate(form)函数中执行验证。

所以，代替

if (fail == "") {
    $(function () {
        $('#submitbtn').click(function (event) {
            event.preventDefault();
            var form = $(this).closest('form'),
                action = form.attr('action');
            $.post(action, form.serialize(), function (data) {
                $('#errors').html("You have been successfully subscribed to our newsletter.");
            })
        });
    });
}

只需使用

if (fail == "") {
    var form = $(this).closest('form'),
        action = form.attr('action');
    $.post(action, form.serialize(), function (data) {
        $('#errors').html("You have been successfully subscribed to our newsletter.");
    })
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接