jquery verification form of radio and multiple-select instances _jquery

For example, under the option, we require that the * is required, see figure:

Did you see the page above? Business management channels under the multiple selection must select one, how to do? If none is selected, we will be prompted for the error message when the form is submitted,. We all know that jquery validation input is very simple, but rarely to verify multiple or single, but also a group of verification, is divided into groups, not on the page all!! What do we do?

Don't use jquery for anything else, okay? OK!!! But we still use jquery to actually do it.

First of all, there is no selected effect, we should be like this:

Suppose one is selected and the message disappears immediately, as shown in the following figure:

In fact, this can be achieved with JSMAP is to do with JS analog map. The following code is common, later encountered this situation, directly the following JS code into, do a configuration can be achieved.

With the following code, you have to introduce the jquery validated JS

The code is as follows:

First, put the following JS code into your JS file, or page:

Copy Code code as follows:

/**
* Array memory is designed to facilitate juery verification of Chckbox and design array memory, configuration objects, to verify checkbox and radio.
* Private variable Area definition array
* Then configure each array into the setting so that it exists in the memory
* In the application of the array name can be easily manipulated and get different arrays.
* When you need an array, if you only manipulate an array, this method is more than, but if you manipulate multiple arrays or only array names, this memory is useful.
* @author UESTC Park Zhong to
* @return Array Memory Object
*/
var Maparr = (function () {

var BHC = [], BCC = [], BQC = [], IC = [];
var BAC = [];
var Buc = [];

var setting = [
{
Key: "BHC",
Value:bhc
},
{
Key: "BAC",
Value:bac

}, {key: "Buc", Value:buc}, {key: "BCC", value:bcc}, {key: "BQC", VALUE:BQC}, {key: "IC", Value:ic}
];

return {

Get several organizations by array name
Getarr:function (arr_name) {
for (var setting_i = 0, Setting_len = setting.length; setting_i < Setting_len; setting_i++) {
if (Setting[setting_i].key = = Arr_name) {
return setting[setting_i].value;
}
}
},
Deletes an element in the specified array
Delarr:function (Arr_name, Elementvalue) {
for (var Delarr_i = 0, Delarr_len = setting.length; Delarr_i < Delarr_len; delarr_i++) {
if (Setting[delarr_i].key = = Arr_name) {
for (var Arr_i = 0, Arr_len = setting[delarr_i].value.length; Arr_i < Arr_len; arr_i++) {
if (setting[delarr_i].value[arr_i] = = Elementvalue) {
Setting[delarr_i].value.splice (Arr_i, 1);
}
}

}
}
},
Add an element to an array
Pusharr:function (Arr_name, Elementvalue) {
for (var Pusharr_i = 0, Pusharr_len = setting.length; Pusharr_i < Pusharr_len; pusharr_i++) {
if (Setting[pusharr_i].key = = Arr_name) {
Setting[pusharr_i].value.push (Elementvalue);
}
}
}
}

} ());

/**
* check box or single click event applied to the map above
* @author UESTC Park Zhong to
* @return Array Memory Object
*/
function Chk (event, Arrname) {

if (event.checked = = True) {
Add an element to an array named Arrname
Maparr.pusharr (Arrname, Event.value);
} else {
To remove an element from an array named Arrname
Maparr.delarr (Arrname, Event.value);
}

var checkinput = document.getElementById (arrname);

if (Maparr.getarr (Arrname) [0] = = ' Undefined ' | | Maparr.getarr (Arrname) [0] = = null) {
Checkinput.value = null; Give him the value of this array. In this case, the effect of validation
} else {
Checkinput.value = Maparr.getarr (Arrname) [0];
}
How do I get prompt information to disappear after adding value?
if (!$ ("#form1"). Valid ()) return false; Just to get this chapter out of the way, so don't run the check that was submitted, it will affect the display of the section
}

Second: Add an input after the list of multiple or single selections that you need to verify:

Copy Code code as follows:

<input id= "BAC" name= "BAC" type= "text" style= "width:0;height:0;border:0" class= "required"/>

Three: Add an event to your checkbox or radio tag:

Copy Code code as follows:

Onclick= "Chk (This, ' BAC ')"

Four: Consistency: In "Two" the input is used for informational, so your ID and name must have, and the names should be consistent, such as: id= "BAC", Name= "BAC", input written well after, in the event of accession, Your second parameter must be the same as the ID of the input, or BAC;

Five: Configuration, face done, is the core configuration, this configuration where to match it, is called you introduced me above the JS code. Onclick= "Chk (This, ' BAC ')" is for each check or single plus event, and there is also a meaning to apply this check to the BAC array, so we go to setting to configure an array.

Add an array to the Maparr:

Copy Code code as follows:

var bac=[];

Add an object to the setting of Maparr:

Copy Code code as follows:

｛
Key: "BAC",
Value:bac
｝

Be sure to be consistent, or you won't succeed.
Emphasis: Input ID same as the second parameter of onclick maparr the variable name of the array variable is in accordance with the ID of the input, the value of the key in the setting is the same as the ID of the input setting the value of values is the array you configured. OK, now we can verify it.