Question 321376 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to prevent user from leaving a textbox blank

We have a textbox control with ID of clientID.

Users cannot submit the form when the ClientID box is blank.

Secondly, users cannot submit the form unless a minimum of 5 digits or alphanumeric characters are provided.

The code below is supposed to prevent users from submitting the form when ClientID textbox is blank.

I got the sample script from this forum.

The other script is intended to prevent user from submitting the form unless user provides a minimum of 5 digits or characters.

For some reason that we are unable to figure out why some users not only submit the form with less than 5 characters or digits, they submit the form when the ClientID textbox is blank.

Does anyone have any idea what could be wrong with the two scripts below?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Client Survey</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
        $("#clientID").on("keyup", function (e) {
            $(this).val($(this).val().toString().replace(" ",""));
        });
  });
</script>
</head>
<body>
 <form class="form a" id="form1" runat="server">
<asp:TextBox ID="clientID" maxlength="10" placeholder="Enter Client ID here..." Style="width: 150px;" class="form-control"
                            runat="server" AutoPostBack="true" OnTextChanged="clientID_TextChanged"></asp:TextBox>
</form>                            
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
  $("#form1").validate({
        rules: {
            clientID: {
                required: true,
                minlength: 5,
                maxlength: 10
            }
        }
    });
</script>
</body>
</html>

A server side solution would be preferable and greatly appreciated.

Thank you very much in advance

Tags:

2

Answers


  1. 0

    Here’s a server-side solution in C# for your clientID_TextChanged method:

    protected void clientID_TextChanged(object sender, EventArgs e)
{
    if (string.IsNullOrWhiteSpace(clientID.Text) || clientID.Text.Length < 5)
    {
        // Handle the case where ClientID is blank or less than 5 characters
        // You can add your specific logic or show an error message.
        // Example: Response.Write("<script>alert('ClientID must be at least 5 characters');</script>");
    }
    // Continue with the rest of your logic or form submission.
}

    This server-side validation ensures that the conditions are met before proceeding with the server-side logic. Remember to replace the comment with your desired handling of the situation where the ClientID is blank or less than 5 characters.

    Login or Signup to reply.
  2. 0

    There is a "nice" built in system to deal with such a common requirement.

    And even MORE incredible, is this built in system actually injects and builds the JavaScript for you without you having to write any JavaScript code.

    And even better? These so called "validators" run client side!

    And this means ANY submit button on the form is automatic disabled for you.

    So, say we have a text box, and we want to make that text box required?

    Then just drag + drop in a required validator control from the toolbox into that form.

    So, first drop in a script manager.

    So, say we have a text box, and then a button.

    Like this:

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <div style="padding:35px">

        <h3>Enter ID</h3>
        <asp:TextBox ID="txtID" runat="server"
            TextMode="Number">
        </asp:TextBox>

        <br />

        <asp:Button ID="cmdMySubmit" runat="server" Text="Done"
            CssClass="btn" 
            OnClick="cmdMySubmit_Click"                
            />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
            runat="server" 
            ErrorMessage="Please enter a number" ControlToValidate="txtID">
        </asp:RequiredFieldValidator>

    Note how we set textmode="number". That means when the user types, they can ONLY type in numbers – letters will not appear.

    So, the effect with above is this:

    enter image description here

    Now, right below the required validator, drop in a "range" validator.

    So, we now have this:

            <h3>Enter ID</h3>
        <asp:TextBox ID="txtID" runat="server"
            TextMode="Number">
        </asp:TextBox>

        <br />

        <asp:Button ID="cmdMySubmit" runat="server" Text="Done"
            CssClass="btn" 
            OnClick="cmdMySubmit_Click"                
            />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
            runat="server" 
            ErrorMessage="Please enter a number" ControlToValidate="txtID">
        </asp:RequiredFieldValidator>

        <asp:RangeValidator ID="RangeValidator1" runat="server" 
            ErrorMessage="Please enter a number from 1 to 99999" 
            ControlToValidate="txtID"
            MaximumValue="99999" 
            MinimumValue="1"
            Type="Integer" >
        </asp:RangeValidator>

    And the result is now this:

    enter image description here

    Note that due to scripting and interference from jQuery, (if present on the page), then add this one line to the page load event:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.None

    ' other page load code follows


End Sub

    Note that you can (and should) use the property sheets when in design mode.

    So, all of this can be wired up for you, and it is all drag + drop, and no real code need be written in JavaScript, or even server side for that matter.

    So, for such types of validation, WebForms has a fantastic built in system to deal with this common requirement. Hence no need to try and write a bunch of validation code for a given web page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search