输入框值使用jquery验证已过时

时间:2014-04-09 10:01:29

标签: javascript php jquery ajax jquery-validate

我正在使用jQuery v1.9.1和jQuery-validate v1.9。我正在尝试使用给定id的用户并使用远程方法验证它。我想检查它是否存在于数据库中。我无法得到我发送到php脚本的json工作,因为我使用ajax得到的值已经过时了。下面的代码(我已经删除了php)构建字符串“MailingListID:1”,即使我已经为MailingListID的值而不是1输入了12。

JS

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js">    </script>
<script>
$(function() {
    $("#createForm").validate({
        rules:
        {
            WebFormURL:
            {
                required: true,
                url: true
            },
            RedirectURL:
            {
                required: true,
                url: true
            },
            DownloadURL:
            {
                required: false,
                url: true
            },
            EmailNotification:
            {
                email: true
            },
            MailingListID:
            {
                "remote":
                {
                    url: 'checkMailingListID.php',
                    type: "POST",
                    //contentType: "application/json; charset=utf-8",  
                    //dataType:"json",
                    data: "MailingListID=" + $('#mlID').attr('value'),
                    dataFilter: function(data) {
                        var json = JSON.parse(data);
                        if(json === null) {
                            return false;
                        }
                        if(json.mlExists == "false") {
                            return "\"" + json.errorMessage + "\"";
                        } else {
                            return success;
                        }
                    }
                }
            }
        },
        messages:
        {
            MailingListID:
            {
                remote: jQuery.validator.format("No Mailing List with ID {0} exists.")
            }
        },
        submitHandler: function(form)
        {
            form.submit();
        }
    });
});
</script>

HTML

<h1>Web Form Creator</h1><form id="createForm" name="createForm" method="post" action="">
 <table>
 <tr><td colspan="2" align="left"><h2><b>Enter form details</b></h2></td></tr>
 <tr><td><b>Web Form Name: </b></td><td><input type="text" name="WebFormName" id="WebFormName" size="45"/></td></tr>
 <tr><td><b>Web Form URL: </b></td><td><input type="text" value="http://www.SIMUL8.com/" name="WebFormURL" id="WebFormURL" size="45"/></td></tr>
 <tr><td><b>Redirect URL: </b></td><td><input type="text" value="http://www.SIMUL8.com/" name="RedirectURL" id="RedirectURL" size="45"/></td></tr>
 <tr><td><b>Download URL: </b></td><td><input type="text" value="http://www.SIMUL8.com/" name="DownloadURL" id="DownloadURL" size="45"/></td></tr>
 <tr><td><b>Send Notification Email to: </b></td><td><input type="text" name="EmailNotification" id="EmailNotification"  size="45"/></td></tr>

 <tr><td><b>Subscribe to Mailing List: </b></td><td><input type="text" value="1" name="MailingListID" id="mlID" size="45"/></td></tr> 

 <tr><td colspan="2" align="left"><input type="submit" name="submit" id="submit" value="Generate Form" /></td></tr>
 </table>
 </form>

我还试图完全删除值,然后我只是得到一个空白值:

<tr><td><b>Subscribe to Mailing List: </b></td><td><input type="text" name="MailingListID" id="mlID" size="45"/></td></tr>

我已经尝试过其他方法来获取输入框值,例如$('#mlID')。val()等等无济于事。 ContentType和dataType也没有区别。我假设在html表单由于某种原因有机会更新之前,正在调用jQuery-validate库。任何人都可以给我任何提示吗?我考虑过尝试使用两个jquery库的更新版本,但我找不到任何url。

1 个答案:

答案 0 :(得分:1)

你误解了the documentation。所描述的“响应”是您从服务器端代码返回的内容。您return内没有“remote”任何内容。

MailingListID: {
    remote: {
        url: 'checkMailingListID.php',
        type: 'POST',
    }
}

由于您的服务器端脚本是PHP,因此只需echo truefalse或表示错误消息的JSON格式字符串。

http://jqueryvalidation.org/remote-method/

  

serverside 资源通过jQuery.ajax(XMLHttpRequest)调用,并获取与验证元素名称对应的键/值对及其值作为GET参数。 响应评估为JSON,有效元素必须为true,无效元素可以为falseundefinednull,默认消息;或字符串,例如“已经采用该名称,请尝试使用peter123”以显示为错误消息。“


旁注:这正是默认行为......因此您根本不需要submitHandler选项...

submitHandler: function(form) {
    form.submit();
}