Question

I am having some trouble having my password validation working, I think that the javascript is now correctly defined but I am not able to validate the form successfull as it keeps posting regardless of the errors.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
} 
@model Models.ResetModel

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">


$(document).ready(function () {
    $('#close').click(function (event) {
        closeAjax();

        event.cancelBubble = true;
        event.returnValue = false;
        event.preventDefault();
        event.stopPropagation();
    });
});

$(document).ready(function () {
    $("#resetForm").validate({
        rules: {
            password: {
                require: true, 
                minlength: 6
            },
            confirmpassword: {
                require: true,                     
                minlength: 6,
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                require: "You must enter a password!",
                minlength: "Password must contain at least 6 characters"
                },
            confirmpassword: {
                require: "You must enter a password confirmation!",
                minlength: "Password must contain at least 6 characters",
                equalTo: "Password and Password Confirmation fields do not match!"
                }
        }
    });
});

here is the HTML:

<div class="form_container">
<div class="logo">
    <a href=""><img class="logo" src="@Url.Content("~/Content/SP_Logo_white.png")" alt="SmartPlant Cloud"/></a>
</div>
    <div class="reset">
      <h3>Password Reset</h3>
    <div class="reset-help">
      <p>Forgot your password? Use the form to change or reset your password.</p>
    </div>
    @using (Html.BeginForm("Reset", "Reset", new { qString = Model.QueryString, @id = "resetForm" } ))
    {
    <label for="reset">UserName:</label>
    <input type="text" id="username" name="username" /><br />
    <label for="password">New Password:</label>
    <input type="password" id="password" name="password" /><br />
    <label for="confirmpassword">Confirm Password:</label>
    <input type="password" id="confirmpassword" name="confirmpassword" />
    <p><input type="submit" id="submit" value="Submit" /></p>
    }
</div>
Was it helpful?

Solution

You need to create the function to validate the form client side that will return a value "false" value if the data entered is incorrect, hence the from will not be submitted. This does NOT involve PHP it's to catch it before the PHP is loaded.. You can do validation checks also- server side as well.

   function Validate()
    {

        //insert javascript validation check

                return false;
                }

 <form onsubmit="return Validate();"  action="your.php" method="post" name="your name" >

 <label for="reset">UserName:</label>
<input type="text" id="username" name="username" /><br />
<label for="password">New Password:</label>
<input type="password" id="password" name="password" /><br />
<label for="confirmpassword">Confirm Password:</label>
<input type="password" id="confirmpassword" name="confirmpassword" />
<p><input type="submit" id="submit" value="Submit" /></p>
    </form>

Hope this helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top