Bootstrap Validation with Angularjs

Question

0.00/5 (No votes)

See more:

Hiii All,
i have a login form with the below code

HTML

<html>
<head>
 <script type="text/javascript">

        $(document).ready(function () {
            $('#loginForm').bootstrapValidator({
                framework: 'bootstrap',
                excluded: [':disabled'],
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                //err: {
                //    // You can set it to popover
                //    // The message then will be shown in Bootstrap popover
                //    container: 'tooltip'
                //},

                fields: {
                    username: {
                        validators: {
                            notEmpty: {
                                message: 'The username is required'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required'
                            }
                            //},
                            //regexp: {
                            //    regexp: /^[a-z\s]+$/i,
                            //    message: 'The Password can consist of alphabetical characters only.'
                            //}
                            //regexp: {
                            //            regexp: /^[a-z\s]+$/i,
                            //            message: 'The full name can consist of alphabetical characters and spaces only'
                            //        }




                        }
                    }
                }
            })
            .on('success.field.fv', function (e, data) {
                if (data.fv.getInvalidFields().length = 0) {    // There is invalid field
                    data.fv.disableSubmitButtons(true);
                }
            });

        });





    </script>


</head>
<body>
    <h2>Login</h2>
    <div class="container" style="">
        <form id="loginForm" novalidate ng-submit="loginform.$valid && login.submit()"
            method="post" class="form-horizontal" data-ng-controller="IMSController">

            <div class="form-group">
                <label class="col-xs-3 control-label">Username</label>

                <div class="col-xs-5">
                    <input type="text" class="form-control" name="username" data-ng-model="LoginUserName" novalidate />
                </div>

            </div>

            <div class="form-group">
                <label class="col-xs-3 control-label">Password</label>
                <div class="col-xs-5">

                    <input type="password" class="form-control" name="password" data-ng-model="LoginPassword" novalidate />

                </div>
            </div>

            <div class="checkbox" style="margin-removed 292px">
                <label><input type="checkbox" data-ng-model="RememberMe"> Remember me</label>
            </div>
            <br />

            <div class="form-group">
                <div class="col-xs-5 col-xs-offset-3">
                    <button type="submit" class="btn btn-primary" ng-click="checkLogin()">Login</button>
                    <button type="reset" class="btn btn-default">Reset</button>
                </div>
            </div>

        </form>
    </div>
</body>
</html>

in that whenever i clicked on the Login buton the ng-click method is executing even though the validation fails..
how can i stop this ..
any help in this regard is highly appreciated.

Thanks in Advance..:)

Posted 18-Aug-15 23:53pm

Member 11682666

Updated 14-Apr-16 4:58am

CHill60

v2

Add a Solution

Comments

Sreekanth Mothukuru 20-Aug-15 3:04am

Why don't you use simple jQuery validation plugin ?!

All you need to call is validate method on button with some rules:
var $checkoutForm = $('#loginForm').validate({
// Rules for form validation
rules : {
fname : {
required : true
},
...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Zaeem Shamsi · Answer 1 · 2016-04-14T04:58:00

Solution 1

You can disable the login button if form is not valid with angular directive ng-disabled="loginform.$invalid".It'll disabled your button if form is invalid.your login button would be like <button type="submit" ng-disabled="loginform.$invalid" class="btn btn-primary" ng-click="checkLogin()">Login</button>

Posted 14-Apr-16 4:58am

Zaeem Shamsi

Updated 14-Apr-16 5:00am

v2