locked
Validating C# Form Controls with JavaScript and Display Border of Control in Red RRS feed

  • Question

  • User564995064 posted

    I am very new to Javascript and Bootstrap.  But I have a form created using Bootstrap and when the field is active, the border is blue.  I need to validate these fields and if they fail validation, I want to change the border color to red.  I have searched for code and tried it but all I can seem to find that works is when I use an input field, not a C# control.  For example, this works.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="form1.aspx.cs" Inherits="TestFormValidation.form1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Project 4</title>
    
        <style type="text/css">
            .error {
                border:2px solid red;
            }
        </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    </head>
    
    <body>
        <form name="myForm" onsubmit="return validateForm()">
            Phone Number:<input type="text" id="phone">
            <br>
            <input type="submit" value="Submit">
        </form>
    
        <script type="text/javascript">
    
            //at first, we define a variable stating that an event listener has been attached onto the field
            var validatePhoneOnKeyUpAttached = false;
    
            function validateForm() {
    
                //then, we attach the event listened to the field after the submit, if it has not been done so far
                if (!validatePhoneOnKeyUpAttached) {
                    document.getElementById("phone").onkeyup = checkPhone;
                    validatePhoneOnKeyUpAttached = true;
                }
    
                return checkPhone();
            }
    
            function checkPhone() {
                var phone = document.forms["myForm"]["phone"].value;
                var phoneNum = phone.replace(/[^\d]/g, '');
                if (phoneNum.length > 6 && phoneNum.length < 11) {
                    document.getElementById("phone").style.borderColor = "transparent"; //and you want to remove invalid style
                    return true;
                }
                else if (phoneNum.length < 7 || phoneNum.length > 10) {
                    //document.getElementById("phone").className = document.getElementById("phone").className + " error";
                    //document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
                    document.getElementById("phone").style.borderColor = "red";
    
                    return false;
    
                }
            }
        </script>
    </body>

    However, this does not.  It just displays the red border when the submit button is pressed but when you move off the button, the red border disappears.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Project 4</title>
    
        <style type="text/css">
            .error {
                border:2px solid red;
            }
        </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <style type="text/css">
    .field-error .control-label,
    .field-error .help-block,
    .field-error .form-control-feedback {
        color: #ff0039;
    }
    
    .field-success .control-label,
    .field-success .help-block,
    .field-success .form-control-feedback {
        color: #2780e3;
    }
    </style>
    </head>
    
    <body>
        <form name="myForm" runat="server">
            Phone Number:
            <asp:TextBox ID="txtPhone" runat="server" AutoPostBack="false"></asp:TextBox>
            <br>
    
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="check()" />
        </form>
    
        <script type="text/javascript">
    
            function check() {
                var phone = document.getElementById('<%=txtPhone.ClientID%>').value;
    
                var phoneNum = phone.replace(/[^\d]/g, '');
                if (phoneNum.length > 6 && phoneNum.length < 11) {
                    document.getElementById("txtPhone").style.borderColor = "#2780e3"; 
                    return true;
                }
                else if (phoneNum.length < 7 || phoneNum.length > 10) {
                    //document.getElementById("phone").className = document.getElementById("phone").className + " error";
                    //document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
                    document.getElementById("txtPhone").style.borderColor = "#ff0039";
    
                    return false;
                }
            }
       
        </script>
    </body>

    This is a form I set up just to test one field.  I will need to validate textboxes (required, formatted such as phone number, numeric only), radio buttons and drop down lists.  I am not 100% sure the best way to go about this.

    My questions are:  1) Why does the border on the textbox only show red when the button is depressed and not afterward?  2) Can I use regular expression validators for part of the validation and still show the red border?  3)  Any other assistance you can give with validating the other controls.

    Thank you so much in advance for any help you can give.

    Friday, May 18, 2018 2:08 PM

Answers