Bootstrap validate easy to use

I wrote a login verification with bootstrap date a few days ago. Here's a small note

First, we need to introduce

Bootstrappvalidator. CSS / / can not be imported

jquery-2.1.0.min.js

bootstrap.min.js

bootstrapValidator.js

The following is the verification method. The name attributes of the two text boxes verified are loginName and password (remember to use the name attribute for the text box, otherwise the verification is invalid)

function validate(){
            $('form').bootstrapValidator({
                 message: 'This value is not valid',//Default prompt
                    feedbackIcons: {//Prompt Icon
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                fields: {
                    loginName: {
                        message: 'User name verification failed',
                        validators: {
                            notEmpty: {
                                message: 'User name cannot be empty'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: 'Password cannot be empty'
                            }
                        }
                    }
                }
            }).on('success.form.bv',function(e){
                formsub();
                e.preventDefault();//Prevent automatic submission
            });
        }

function formsub(){
            var flag = $('form').data("bootstrapValidator").isValid();//Calibration qualification
            if(flag){
                var load = top.layer.load();
                var $form = $('#form');
                $.ajax({
                    url:$form.attr('action'),
                    data:$form.serialize(),
                    type:'post',
                    beforeSend:function(){
                        layer.msg('Logging in');
                    },
                    success:function(data){
                        if(data=="success"){
                            setTimeout(function(){
                                layer.close(load);
                                layer.msg('Login successfully');
                                setAndRemoveCookie();//Whether to write cookie
                            },1000);
                            window.location.href=path+'/department/choose.do';
                        /*     setTimeout(function(){
                                //Login back
                                
                            },2000); */
                        }else{
                            layer.close(load);
                            layer.msg('Authentication failed,Please check whether the user name or password is correct!',{
                                time:3500 //3.5 Seconds later
                            });
                            /* setTimeout(function(){
                                
                            },1000); */
                        }
                    },
                    error:function(e){
                        layer.msg('Make a mistake o(╥﹏╥)o,Please contact backstage!',{
                            btn:'I got it!'
                        });
                        layer.close(load);
                    }
                })
            }
        }
There was a problem in the form validation before. When I click to log in, only when I click for the first time, ajax requests the background to return the user name / password error message normally  
But if I make a mistake on purpose and click again, I will find that the background enters twice. At this time, ajax directly enters the error blank page returned
I checked the data on the Internet and said that there is a default commit behavior in bootstrap date, so I added the following code
e.preventDefault(); / / prevent automatic submission 
This code can only be added at the end of the line, otherwise when you click login, there will be no response for the first time


 


Keywords: Javascript JQuery Attribute

Added by january_9th on Fri, 13 Dec 2019 23:30:45 +0200