客户端验证未发布值答案

【问题标题】：Client-side validation is not posting values客户端验证未发布值
【发布时间】：2015-12-17 05:20:18
【问题描述】：

我有一个表单可以一次验证一个值。当所有值都经过验证并更正后，我的 ajax 发布功能不想发布。我想在所有值都正确时发布。一个文本字段有名称，最后一个文本字段是电子邮件。

请查看我的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;")
        }
    });
});

【问题讨论】：

标签： javascript php jquery ajax validation

【解决方案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 调用是否发生在浏览器控制台中...

希望对你有帮助！

【讨论】：

【解决方案2】：

朋友，你在调用这个不存在的函数“checkkRegexp”！！

如果某些验证出错，您应该在函数结束时返回 false 以防止表单提交！

您还应该看看“欧芹”。这将帮助您进行表单验证。

【讨论】：

【解决方案3】：

像这样更改函数的开始

$("#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 请求和验证

【讨论】：