Example of jQuery Validate plugin validating input values via AJAX

In projects, it is often encountered that there are need for background verification issues, such as whether the username or user account exists. The jQuery Validate plugin can be used to complete verification with the remote validation rule.

Example:

1. Basic Usage

1.Form verification required

<form id="registForm"> 
 <input type="text" id="username" name="username"> 
</form> 

2.js

Using the remote validation rule, the simplest and most direct way is remote: url, at this time, the request url will automatically append the current validated value, for example, the following syntax, the request url is: xxx/checkUsername.do?username=test

// Importing jquery, validate library omitted
$(function() {
	$.validator.setDefaults({
		submitHandler: function(form) {
			// Processing after validation passes
			...
		}
	});
	$("#registForm").validate({
		rules: {
			username: {
				required: true,
				remote: "checkUsername.do"
			},			
		},
		messages: {
			username: {
				required: "The username cannot be empty",
				remote: "The username already exists"
			}
		}
	});
});

3.Backend (Spring MVC Test)

The backend response can only output true or false, and cannot have other data, true: validation passed, false: validation failed; The return type can be set to boolean or String

(1).Returns boolean

@RequestMapping("/checkUsername)
public @ResponseBody boolean checkUsername(@RequestParam String username) {
	// Test
	return !"test".equals(username);
}

(2).Returns String

@RequestMapping("/checkUsername)
public @ResponseBody String checkUsername(@RequestParam String username) {
	// Test
	return !"test".equals(username) ? "true" : "false";
}

II. Other Usage

The above usage does not meet the actual needs, sometimes there is a need to submit other parameters, parameters and attribute names are not consistent, or the request method is POST, the syntax is as follows:

1.js

Use the data option, that is, the syntax of jQuery's $.ajax({...});

The submitted data needs to be returned by the function in the form of a return value; directly writing a value has issues;

The default is to submit the current validated value, that is, the username: xxx in the following example will be submitted as a parameter by default

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //Data transmission method
		dataType: "json",   //Data format accepted 
		data: {      //Data to be transmitted
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "additional information";
			}
		 }
	}
}

2.background

restricted to POST method requests

@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)
public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {
	// Test
	System.out.println(extra);
	return !"test".equals(user.getUsername());
}

Reference article: http://www.runoob.com/jquery/jquery-plugin-validate.html

This is all the content of the jQuery Validate plugin instance of ajax input value verification shared by the editor, I hope it can be a reference for everyone, and also hope everyone will support the呐喊 tutorial.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been edited by human, nor assumes any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.