Jquery verifies single-choice and multi-choice instances in the form

For example, in the options below, we need to include * as required. See the figure below:

Did you see the webpage above? You must select one option for multiple business channels. What should I do? If none of them are selected, an error message is prompted when the form is submitted ,,,. As we all know, jquery is very simple to verify input, but it rarely needs to verify multiple choices or single choice. In addition, it is still a group of verifications, which are divided into groups, not all on the page !! What should we do?

You don't need jquery to use other ones, can you? Yes !!! But we still use jquery to implement it.

First, let's take a look at the unselected results. We should look like this:

If one is selected, the prompt message disappears immediately, for example:

In fact, this can be implemented using jsmap, that is, using js to simulate map. The following code is public. If this happens in the future, you can directly merge the following js Code and configure it.

With the following code, you must introduce js verified by jquery.

The Code is as follows:

First, put the following js Code in your js file or in the page:
Copy codeThe Code is as follows:
/**
* Array Memory is designed to facilitate juery's chckbox verification. It configures the object for checkbox verification and single choice.
* Private variable area definition array
* Configure each array to setting so that the array exists in the memory.
* When using an array name, you can easily operate and obtain different arrays.
* When you need an array, if you operate only one array, this method is more than, but if you operate multiple arrays or only have the array name, this memory is very useful.
* @ Author
* @ Return Array Storage 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 {

// Obtain the number organization using the 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;
}
}
},
// Delete an element from 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 );
}
}
}
}

}());

/**
* The check box or single-choice click event is applied to the above map
* @ Author
* @ Return Array Storage object
*/
Function chk (event, arrName ){

If (event. checked = true ){
// Add an element to the array named arrName
MapArr. pushArr (arrName, event. value );
} Else {
// Remove an element from the 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 the value of this array to him. In this way, the verification results will be effective.
} Else {
CheckInput. value = MapArr. getArr (arrName) [0];
}
// How can I make the prompt disappear after the value is added?
If (! $ ("# Form1 "). valid () return false; // only to make this chapter expand and disappear, do not run the submitted check, which will affect the display of the chapter.
}

2. Add an input after the multiple-choice or single-choice titles you need to verify:
Copy codeThe Code is as follows:
<Input id = "BAC" name = "BAC" type = "text" style = "width: 0; height: 0; border: 0" class = "required"/>

3. Add events to your checkbox or radio tag:

Copy codeThe Code is as follows:
Onclick = "chk (this, 'bac ')"

4. Consistency: the input in "2" is used for prompt information. Therefore, your id and name must have the same name. The above is: id = "BAC", name = "BAC", after the input is written, when you add an event, your second parameter must have the same name as the input id, or if it is BAC;

V. Configuration: The face is ready, that is, the core configuration. Where is the configuration? It is the js code that you introduced above. Onclick = "chk (this, 'bac ')" is to add an event for each check or single choice. It also means to apply this check to the BAC array, therefore, configure an array in setting.

Add an array to MapArr:
Copy codeThe Code is as follows:
Var BAC = [];

Add an object to setting of MapArr:
Copy codeThe Code is as follows:
{
Key: "BAC ",
Value: BAC
}

Ensure consistency, otherwise it will not succeed.
Note: The input id is the same as the second parameter of onclick. The variable name of the array variable added in MapArr is the same as the input id, the key value in setting is the same as the input id. The value in setting is the array you configured. Okay, now we can implement verification.