Question

我有一个表格，一次验证一个值。当所有值都经过验证并且正确时，我的ajax post函数不想发布。我希望在所有值都正确时发布。一个文本字段有一个名称，最后一个文本字段是一个电子邮件。

请检查我的jsFiddle和以下代码。

HTML：

<form enctype="multipart/form-data" method="post" id="myform" name="myform_1">
    <input type="text" value="" id="name" name="myname" />
    <input type="text" value="" id="email" name="myemail"/>
    <input type="submit" value="Valid" id="validate" name="validate"/>
</form>

使用Javascript：

 $(document).ready(function(){
     function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min )
        {
            o.css("background-color","#F30");
            return false;
        }
        else
        {
            o.css("background-color","#FFF");
            return true;
        }
    }

    function checkRegexp( o, regexp, n ) {
        if ( !( regexp.test( o.val() ) ) )
        {
            o.css("background-color","#F30");
            return false;
        }
        else
        {
            o.css("background-color","#FFF");
            return true;
        }
    }

    //Click action
    $("#validate").click(function()
    {
        var name = $( "#name" );
        var email = $("#email");
        var valid = true;
        emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

        valid = valid && checkLength( name,"Please enter a name",3,6);
        valid = valid && checkRegexp( name, /^[a-z]([A-Z_\s])+$/i, "Name may consist of a-z, and 3 or more characters." );
        valid = valid && checkLength( email, "email", 6, 80 );
        valid = valid && checkkRegexp( email, emailRegex, "eg. ui@jquery.com" );
        //Email
        //alert ($("#myform").serialize());
        //End of Email

        if(valid)
        {
            var request = $.ajax({
                url: "inc/newsletter.php", // Ofcourse this would be your addLike.php in your real script
                type: "POST",
                data: $("#myform").serialize()
            });
            request.done(function(msg) {
                alert("Your details have been saved");
                location.reload();
            });

            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });

            return valid;
        }
        else
        {
            alert("No;")
        }
    });
});

Answer 1

您的提交事件处理程序未返回false，因此它完全发布了表单。首先，确保在单击处理程序中停止事件冒泡以下列方式：

$("#validate").click(function(event)
{
       //YOUR AJAX CALL
       //RETURN SHOULD ALWAYS BE FALSE FOR AJAX SUBMISSION WHEN CALLED FROM TYPE BUTTON
       event.preventDefault();
       event.stopPropagation();
       return false;
})

然后，您可以跟踪浏览器控制台中是否发生了ajax调用...

希望它有所帮助！

Answer 2

像这样改变你的功能的开始

$("#validate").click(function(e){
  e.preventDefault();
  //Rest of your function
}

e.preventDefault（）不是跨浏览器兼容的，可能会在旧版浏览器中中断。如果您支持旧版浏览器，请使用以下内容

if(e.preventDefault()!=undefined){
   e.preventDefault();
}else{
   e.returnValue = false;
}

如果您有兴趣知道为什么您的方法不起作用。您单击的按钮是一个提交按钮，您不会阻止它的默认行为。即使您的表单字段不完整，这也是提交表单的原因。

注意事项仍然是ajax cal不会在示例提供中调用，但它会自然地刷新。

提供的解决方案将停止默认操作，并将完全控制您的ajax请求和验证

客户端验证不是发布值

2 个答案: