ASP.Net Webforms and Validation

Question

I have a asp.net web application that I wish to use form validation io jquery plugin to perform client side validation.

I have the form set up and the plugin is validating the fields as they are changed, however if one of the fields is validated it allows the rest of the form to be submitted even though I have empty required fields.

asp.net Web form page:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="NewUser.aspx.vb" Inherits="NewUser" ClientIDMode="Static" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="Layout/formvalidation/css/formValidation.min.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="row" id="NewUserForm" role="form">
    <h1 class="col-xs-12">New User Form:</h1>
    <div class="form-group">
        <label class="control-label col-sm-2" for="<%= UsernameText.UniqueID %>">Username:</label>
        <div class="col-sm-10">
            <asp:TextBox runat="server" ID="UsernameText" CssClass="form-control" placeholder="Username" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="<%= EmailText.UniqueID %>">Email:</label>
        <div class="col-sm-10">
            <asp:TextBox runat="server" ID="EmailText" CssClass="form-control" TextMode="Email" Type="email" placeholder="Ëmail address"/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="<%= PasswordText.UniqueID %>">Password:</label>
        <div class="col-sm-10">
            <asp:TextBox runat="server" ID="PasswordText" CssClass="form-control" TextMode="Password" placeholder="Password" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="<%= ConfirmPasswordText.UniqueID %>">Confirm Password:</label>
        <div class="col-sm-10">
            <asp:TextBox runat="server" ID="ConfirmPasswordText" CssClass="form-control"  TextMode="Password" placeholder="Confirm password"  />
        </div>
    </div>
     <asp:LinkButton ID="LinkButton1" runat="server" Text="Button" CssClass="btn btn-primary disabled" type="submit" />
</div>
<br />
<div class="row">
    <div class="col-xs-12">
        <asp:LinkButton runat="server" ID="CreateUserButton" text="Create User" CssClass="btn btn-info" />
    </div>
</div>


<script src="Layout/formvalidation/js/formValidation.min.js"></script>
<script src="Layout/formvalidation/js/framework/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#NewUserForm').formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                // There is no single quote
                <%=UsernameText.UniqueID%>: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        different: {
                            field: '<%=PasswordText.uniqueID%>',
                            message: 'The username and password cannot be the same as each other'
                        }
                    }
                },
                <%=EmailText.UniqueID%>: {
                    validators:{
                        notEmpty: {
                            Message: 'The email field is required and cannot be empty'
                        },

                        email: {
                            Message: 'Please enter a valid email address!'
                        }
                    }
                },

                <%=PasswordText.uniqueID%>: {
                    validators:{
                        notEmpty: {
                            Message: 'A password is required and cannot be empty'
                        },
                        stringLength: {
                            min: 7,
                            max: 30,
                            message: 'The password must be more than 7 and less than 30 characters long'
                        },
                        regexp: {
                            regexp: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/,                                
                            message: 'Password must contain at least 1 uppercase, 1 lowercase, 1 number and 1 special character'
                        },
                        identical: {
                        field: '<%=ConfirmPasswordText.UniqueID%>',
                        message: 'Passwords do not match'
                    }
                }
            },

            <%= ConfirmPasswordText.UniqueID%>:{
                validators:{
                    identical: {
                        field: '<%=PasswordText.UniqueID%>',
                        message: 'Passwords do not match'
                    }
                }
            }
        }
    });
});
</script>

Any suggestions as to how I can get the page to validate all controls before submit - and if there are any failed validation to prevent the form from submitting.

The plugin Im using is : http://formvalidation.io/

Mourndark Mourndark · Accepted Answer · 2015-12-22T11:38:47

The OnClientClick property is what you need here. Add it to your submit button and specify a Javascript function which does your validate form. If this function returns true, the form will submit as normal, if false, the submit will be blocked.

In your case with formvalidation.io (from the API docs), you'd do something like this:

<asp:LinkButton runat="server" ID="CreateUserButton" text="Create User" CssClass="btn btn-info" OnClientClick="return isValidClient()" />

...
<script type="text/javascript">
    function isValidClient() {
        return $('#NewUserForm').data('formValidation').validate().isValid();
    }
</script>

The most important thing here is to make sure you have return in both the function and the OnClientClick attribute - it won't work otherwise!

ASP.Net Webforms and Validation

1 Answers