Adding JQuery to MVC Page

Question

I am new to using MVC and BootStrap for creating websites and I am a bit lost on how to add some JQuery I wrote to the password textbox.

The purpose of my JQuery is to give the user basic feedback on how secure their password is. I just need help on adding the JQuery function to the password textbox so when the user begins to enter their password my JQuery code will then start to give the user feedback beside their password.

This is my JQuery code

@*Password Strength*@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
    $('#pass').keyup(function (e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        //Not enough characters
        if (false == enoughRegex.test($(this).val())) {
            $('#passstrength').html('More Characters');
            $('#passstrength').css('color', 'red')

        //Strong Password
        } else if (strongRegex.test($(this).val())) {
            $('#passstrength').className = 'ok';
            $('#passstrength').html('Strong!');
            $('#passstrength').css('color', 'lightgreen')
        //Medium Password
        } else if (mediumRegex.test($(this).val())) {
            $('#passstrength').className = 'alert';
            $('#passstrength').html('Medium!');
            $('#passstrength').css('color', 'yellow');
        //Weak Password
        } else {
            $('#passstrength').className = 'error';
            $('#passstrength').html('Weak!');
            $('#passstrength').css('color', 'red')
        }
        return true;
    });
</script>

This is the code for my register page.

@model ultimateorganiser.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) 
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

I know in asp.net I can just give the password textbox an id and then just use that id in my JQuery code, can I just do the same here?

Answer 1

<script>
$(document.ready(function(){

     $('#pass').keyup(function (e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        //Not enough characters
        if (false == enoughRegex.test($(this).val())) {
            $('#passstrength').html('More Characters');
            $('#passstrength').css('color', 'red')

        //Strong Password
        } else if (strongRegex.test($(this).val())) {
            $('#passstrength').className = 'ok';
            $('#passstrength').html('Strong!');
            $('#passstrength').css('color', 'lightgreen')
        //Medium Password
        } else if (mediumRegex.test($(this).val())) {
            $('#passstrength').className = 'alert';
            $('#passstrength').html('Medium!');
            $('#passstrength').css('color', 'yellow');
        //Weak Password
        } else {
            $('#passstrength').className = 'error';
            $('#passstrength').html('Weak!');
            $('#passstrength').css('color', 'red')
        }
        return true;
    });
});

</script>

and in view :

@Html.PasswordFor(m => m.Password, new { @class = "form-control" ,@id="pass" }) 

Answer 2

By default, your input html element will have its name and id set as your model property name, so if your property is "Password", then your jquery selector should match it:

<script>
    $(function() {
        $('#Password').keyup(function (e) {
            ...
        });
    });
</script>