使用jqueryvalidation的远程function
我试图找出如何解决这个问题：
$('#username').blur(function(){ $.post('register/isUsernameAvailable', {"username":$('#username').val()}, function(data){ if(data.username == "found"){ alert('username already in use'); } }, 'json'); }); 接近这个：
rules: { username: { minlength: 6, maxlength: 12, remote: { url: 'register/isUsernameAvailable', type: 'post', data: { 'username': $('#username').val() } } }
但是我很难完成它。 我想要的是代替警报，让它显示错误消息，但我可以在实际的jqueryvalidation消息中设置消息。
http://docs.jquery.com/Plugins/Validation/Methods/remote#options
更新：
出于某种原因，它没有把它作为一个POST做它作为GET请求并且不确定原因。 这是更新的代码：
rules: { username: { minlength: 6, maxlength: 12, remote: { url: 'register/isUsernameAvailable', dataType: 'post', data: { 'username': $('#username').val() }, success: function(data) { if (data.username == 'found') { message: { username: 'The username is already in use!' } } } } },
更新2：
现在，我正在回到某个地方，我正在收到POST请求。 我还有两个问题。 其中一个事实是，要完成另一个POST请求，用户必须刷新表单。 最后一个问题是，如果找到返回的用户名，则不会显示错误消息。
rules: { username: { minlength: 6, maxlength: 12, remote: { type: 'post', url: 'register/isUsernameAvailable', data: { 'username': $('#username').val() }, dataType: 'json', success: function(data) { if (data.username == 'found') { message: { username: 'The username is already in use!' } } } } },
更新：
public function isUsernameAvailable() { if ($this->usersmodel->isUsernameAvailable($this->input->post('username'))) { return false; } else { return true; } }
更新4：
控制器：
public function isUsernameAvailable() { if ($this->usersmodel->isUsernameAvailable($this->input->post('username'))) { return false; } else { return true; } } public function isEmailAvailable() { if ($this->usersmodel->isEmailAvailable($this->input->post('emailAddress'))) { return false; } else { return true; } }
模型：
/** * Check if username available for registering * * @param string * @return bool */ function isUsernameAvailable($username) { $this->db->select('username'); $this->db->where('LOWER(username)=', strtolower($username)); $query = $this->db->get($this->usersTable); if ($query->num_rows() == 0) { return true; } else { return false; } } /** * Check if email available for registering * * @param string * @return bool */ function isEmailAvailable($email) { $this->db->select('email'); $this->db->where('LOWER(email)=', strtolower($email)); $query = $this->db->get($this->usersTable); if($query->num_rows() == 0) { return true; } else { return false; } }
好吧，我特别关注你的插件概念，但是如果用户名大于6或小于12，我希望它检查一下这个插件。从你的jQuery没有插件的核心示例中，它就像添加一样简单一个小的if – 否则这个概念。
$('#username').blur(function(){ if($('#username').val().length < 6 || $('#username').val().length > 12) { alert('Username must be between 6 and 12 characters'); } else { $.post('register/isUsernameAvailable', {"username":$('#username').val()}, function(data){ if(data.username == "found"){ alert('username already in use'); } }, 'json'); } });
完成此操作的最简单方法是简单地返回true ，将错误消息作为字符串返回，或者从服务器端资源返回false 。 根据远程的jQueryvalidation文档 ：
响应被评估为JSON，对于有效元素必须为true，并且对于无效元素，可以是任何false，undefined或null，使用默认消息; 或者一个字符串，例如。 “该名称已被采用，请尝试使用peter123”以显示为错误消息。
这意味着如果在validation成功的情况下您可以更改服务器端代码以返回true ，或者在validation失败的情况下更改错误消息（“用户名已在使用中”），您可以编写以下远程规则：
remote: { type: 'post', url: 'register/isUsernameAvailable', data: { 'username': function () { return $('#username').val(); } }, dataType: 'json' }
您还可以从服务器端资源返回true或false ，并在客户端上定义错误消息。 在这种情况下，您将拥有上述规则，然后是messages对象中的属性：
messages: { username: { remote: "username already in use" } }
我知道为时已晚，但这可以帮助其他人。
远程方法是为了接收一个Json字符串，所以你的服务器端应该返回这样的方法…
echo(json_encode(true)); // if there's nothing matching echo(json_encode(false));
这是我在尝试validation用户昵称时编写的JS代码示例。
$(document).ready(function(){ $('#form').validate({ rules: { user_nickname: { remote: { url: "available.php", type: "post", data: { user_nickname: function() { return $( "#user_nickname" ).val(); } } } } }, messages:{ user_nickname: { remote: "Username already taken" } } });});
希望它对某人有所帮助，它帮助了我。
我意识到这已经过时了，但我很难让这个工作得很好，并想分享对我有用的东西。
客户端表单validation码：
$('#frmAddNew').validate({ onkeyup: false, rules: { ADID: { required: true, alphanumeric: true, maxlength: 10, remote: { url: "ADIDValidation.cshtml", type: "post", dataType: "json", dataFilter: function (data) { if (data) { var json = $.parseJSON(data); if (json[0]) { return JSON.stringify(json[0].valid) /* will be "true" or whatever the error message is */ } } }, complete: function (data) { /* Additional code to run if the element passes validation */ if (data) { var json = $.parseJSON(data.responseText); if (json[0]) { if (json[0].valid === "true") { $('#FirstName').val(json[0].FirstName); $('#LastName').val(json[0].LastName); } } } } } } }, messages: { ADID: { required: "Please Enter an ADID of the Employee", alphanumeric: "The ADID Can Only Contain Letters and Numbers", maxlength: "ADID For User's Current Permissions Must Be 10 Characters or Less" } }, submitHandler: function (form) { form.submit(); }, errorContainer: $('section.errorCon'), errorLabelContainer: $('ol', 'section.errorCon'), wrapper: 'li', showErrors: function (errors) { var error = this.numberOfInvalids(); var message = error == 1 ? 'You missed 1 field:' : 'You missed ' + error + ' fields:'; $('section.errorCon h3').html(message); this.defaultShowErrors(); } });
ADIDValidation.cshtml的服务器端代码（我正在使用Razor网页）：
@{ Layout = null; if(IsPost) { var db = Database.Open(""); var sql = " "; var strADID = Request["ADID"]; var result = db.Query(sql, strADID); IEnumerable response; if(result.Any()) { @* "true" indicates the element passes validation. Additional data can be passed to a callback function *@ response = result.Select(x => new { valid = "true", FirstName = x.FirstName, LastName = x.LastName }); } else { @* The element did not pass validation, the message below will be used as the error message *@ response = new[] { new {valid = "The Employee's ADID '" + strADID.ToString() + "' Is Not Valid. Please Correct and Resubmit"} }; } Json.Write(response, Response.Output); } }
rules: { username: { minlength: 6, maxlength: 12, remote: 'register/isUsernameAvailable', } }
你需要传递用户名
我最近需要在rails项目中进行远程validation，如果输入无效，我很难从服务器端发送正确的响应。 最后，解决方案非常简单。
如果服务器端检查返回true，则可以发送true或“true”，否则您可以返回任何字符串，如“电子邮件已存在”或“电子邮件没有有效的MX记录”。 此字符串将在表单上显示为validation消息。 唯一的问题是从服务器端返回的消息字符串应该是有效的JSON，并且应该采用这种格式 – [“电子邮件已经存在”]。
关于我如何调试并找到解决方案的一些解释：请参阅下面jquery.validate.js中的远程方法。 我在调试的ajax调用中添加了日志语句和错误函数。 当我从服务器端返回一个普通字符串时，抛出了一个jQuery.parseJson错误。
// http://jqueryvalidation.org/remote-method/ remote: function( value, element, param ) { if ( this.optional( element ) ) { return "dependency-mismatch"; } var previous = this.previousValue( element ), validator, data; if (!this.settings.messages[ element.name ] ) { this.settings.messages[ element.name ] = {}; } previous.originalMessage = this.settings.messages[ element.name ].remote; this.settings.messages[ element.name ].remote = previous.message; param = typeof param === "string" && { url: param } || param; if ( previous.old === value ) { return previous.valid; } previous.old = value; validator = this; this.startRequest( element ); data = {}; data[ element.name ] = value; $.ajax( $.extend( true, { url: param, mode: "abort", port: "validate" + element.name, dataType: "json", data: data, context: validator.currentForm, success: function( response ) { console.log("response is "+response); var valid = response === true || response === "true", errors, message, submitted; console.log("valid is "+valid); validator.settings.messages[ element.name ].remote = previous.originalMessage; if ( valid ) { submitted = validator.formSubmitted; validator.prepareElement( element ); validator.formSubmitted = submitted; validator.successList.push( element ); delete validator.invalid[ element.name ]; validator.showErrors(); } else { errors = {}; message = response || validator.defaultMessage( element, "remote" ); console.log("else message is "+message); errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message; validator.invalid[ element.name ] = true; console.log("else errors[ element.name ] "+errors[ element.name ]); validator.showErrors( errors ); } previous.valid = valid; validator.stopRequest( element, valid ); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr.status); console.log(thrownError); } }, param ) ); return "pending"; }