Thursday, May 14, 2015

More examples on Bootstrap form validator

In the previous blog, I have some examples on how to use bootstrap form validation. These days I did some more validation by using bootstrap validation.  Here are the examples.



I would like to have Display Name less then 20 characters, and Search Weight field only can put 1 or 9.

The following highlighted code showed how to add the new validation items in. I used stringLength and regexp validator.

Also you may see, when the mouse is over the red cross on the error field, the error message is showing on top of it. The code for this used 'tooltip'. See the highlighted code below.


 $('#classconfigform')  
           .formValidation(  
                     {  
                          framework : 'bootstrap',  
                          err : {  
                               container : 'tooltip'  
                          },  
                          row : {  
                               selector : 'td'  
                          },  
                          icon : {  
                               valid : 'glyphicon glyphicon-ok',  
                               invalid : 'glyphicon glyphicon-remove',  
                               validating : 'glyphicon glyphicon-refresh'  
                          },  
                          fields : {  
                               'internalClassName[]' : {  
                                    validators : {  
                                         notEmpty : {  
                                              message : 'Internal class name is required'  
                                         }  
                                    }  
                               },  
                               'displayName[]' : {  
                                    validators : {  
                                         notEmpty : {  
                                              message : 'Display name is required'  
                                         },  
                                         stringLength: {  
                                              max: 20,  
                                              message: 'The display name must be less than 20 characters long.'  
                                              }  
                                    }  
                               },  
                               'searchWeight[]' : {  
                                    validators : {  
                                         notEmpty : {  
                                              message : 'Search Weight is required'  
                                         },  
                                         regexp: {  
                                              regexp: '^[19]+$',  
                                              message: 'Only 1 and 9 can be chosen. 1 for class always on top.'  
                                              }  
                                    }  
                               },  
                               'uploadimage[]' : {  
                                    validators : {  
                                         callback : {  
                                              message : 'An image is required',  
                                              callback : function(  
                                                        value,  
                                                        validator,  
                                                        $field) {  
                                                   var $fileid = '';  
                                                   var $classimg = $field  
                                                             .closest('tr');  
                                                   // console.log("classimg:"+$classimg );  
                                                   $fileid = $classimg  
                                                             .find(  
                                                                       '#fileid')  
                                                             .val();  
                                                   //console.log("fileid:"+$fileid);  
                                                   //console.log("upload img value:"+value);  
                                                   if (($fileid == null || $fileid == '')  
                                                             && (value == null || value == ''))  
                                                        return false;  
                                                   else  
                                                        return true;  
                                              }  
                                         },  
                                    //end of callback  
                                    stringLength: {  
                                              max: 30,  
                                              message: 'The file name must be less than 30 characters long.'  
                                              }  
                                    }  
                               }  
                          }  
                     })  








No comments:

Post a Comment