When the textbox fails validation, it should display an error message within the same textbox and prevent the user from proceeding to another textbox

Question

When the textbox fails validation, it should display an error message within the same textbox and prevent the user from proceeding to another textbox

Here is a JavaScript function and a textbox in the code snippet below. The validations work perfectly. The goal is to clear the textbox value and keep the cursor in the same textbox if the validation fails, without moving to other controls.

JS:

function CheckValidity(txtInput, REGEXP) {
    var mySplitResult = new Array();
    mySplitResult = REGEXP.split("~~");

    var iReturn = 0;
    for (i = 0; i < mySplitResult.length - 1; i++) {

        var re = new RegExp(mySplitResult[i]);
        if (!txtInput.match(re)) {
            iReturn = iReturn + 1;
        }
    }

    if (iReturn > 0) {
        alert("Failed...");
    } else {
        alert("Success...");
    }

}

Codebehind:

 txtField.Attributes.Add("onblur", "javascript:CheckValidity(document.getElementById('" + txtField.ClientID + "').value, '" + hidRegExp.Value + "');");

javascript asp.net

Answer 1

Answer №1

I can't figure out why this isn't working for me. I tried creating a simple example with just 2 textboxes.

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtField" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
</form>

Here is the script I'm using:

<script type="text/javascript">
    function validate() {
        var txt = document.getElementById("txtField");
        if (txt.value === "" || txt.value.length <= 1) {
            txt.value = ''; // to clear the textbox value
            txt.focus(); // focus on the textbox
        }
    }
</script>

This code is in the aspx.cs file:

protected void Page_Load(object sender, EventArgs e)
{
  txtField.Attributes.Add("onblur", "javascript:validate()");
}

Answer 2

I can't figure out why this isn't working for me. I tried creating a simple example with just 2 textboxes.

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtField" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
</form>

Here is the script I'm using:

<script type="text/javascript">
    function validate() {
        var txt = document.getElementById("txtField");
        if (txt.value === "" || txt.value.length <= 1) {
            txt.value = ''; // to clear the textbox value
            txt.focus(); // focus on the textbox
        }
    }
</script>

This code is in the aspx.cs file:

protected void Page_Load(object sender, EventArgs e)
{
  txtField.Attributes.Add("onblur", "javascript:validate()");
}

Answer 3

Answer №2

When triggering the Leave event or the blur event for any control, it is possible to invoke the validate() function. This function targets any invalid input and keeps the focus on the textbox until valid data is entered.

http://jqueryvalidation.org/validate/

Answer 4

When triggering the Leave event or the blur event for any control, it is possible to invoke the validate() function. This function targets any invalid input and keeps the focus on the textbox until valid data is entered.

http://jqueryvalidation.org/validate/

When the textbox fails validation, it should display an error message within the same textbox and prevent the user from proceeding to another textbox

Answer №1

Answer №2

Similar questions

Create a bookmarklet for Webdriver when initializing the driver, or store the bookmarklet in your saved bookmarks, all done without the need to

Parse an xslx document and translate it into a List data structure

Using jQuery and PHP to send a dynamic form through AJAX

The IsKey property is not included in the return value of GetSchemaTable()

Accessing the Bootstrap tab form from an external source

Exploring the ins and outs of console interactions in JavaScript

Checking React props using Jest and Enzyme - A simple guide

Tips for passing navigator reference to React Native's <Drawer/> component?

What are the steps for creating a new npm package based on an existing one?

Encountering difficulties while attempting to delete with a router.delete command - receiving a 404 not

How can jQuery be used to target a specific class based on its inner value?

The Evolution of Bulma's Navigation Menu

Sending a post request in AngularJS using the $resource API

Have you not heard of the greatness of Selenium before?

Rotate Chevron icon downwards on mobile devices in a Multilevel Dropdown Bootstrap 4

Transfer the address information to the billing address fields

Utilizing JQuery to extract element tags exclusively, without including their interior content

Find the current elapsed time using Wavesurfer in real time

Is there an efficient method for matching "data-" attributes with property names in mixed case?