ErrorMessage "The field is required"

**Claus Mygind** · Aug 9 '12, 12:19 PM

I don't work with asp, but from the looks of your code, you may want to separate the form validation javaScript from the actions run on the server. That is not to say you should not validate your data on the server before processing.

From your write up, it looks like you want to advise the user of missing data before the form is submitted. You can handle all that with javaScript no need for asp.

You speak of a grid, so I assume you may have more date fields than what is shown in your code. You can write a generic validator to which you pass an object reference to the control being checked instead of writing one for each of the controls.

One other recommendation would be to put all your javaScript in the header section of the html page.

I suspect that your validator does not work because you are waiting until the page hits the server.

Here is some old code that uses the "onChange" event handler. In today's modern code you may want to create a "change" eventlistener instead. But the code is a collection of control type validation, which may be useful to you in other ways.

It is standalone code, so you can just copy it and test it. This code does not use an server intervention. You could modify the code to give more specific information in the alert box or alter the color of the control, or even show all errors at once. But at least the code gives focus to the control that needs to be corrected.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Validator Routines</title>
<script type="text/javascript">
// validates that the field value string has one or more characters in it
function isNotEmpty(elem) {
	var str = elem.value;
    var re = /.+/;
    if(!str.match(re)) {
        alert("Please fill in the required field.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
//validates that the entry is a positive or negative number
function isNumber(elem) {
	var str = elem.value;
    var re = /^[-]?\d*\.?\d*$/;
    str = str.toString();
    if (!str.match(re)) {
        alert("Enter only numbers into the field.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    }
    return true;
}
// validates that the entry is 16 characters long
function isLen16(elem) {
	var str = elem.value;
    var re = /\b.{16}\b/;
    if (!str.match(re)) {
        alert("Entry does not contain the required 16 characters.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
// validates that the entry is formatted as an e-mail address
function isEMailAddr(elem) {
	var str = elem.value;
    var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
    if (!str.match(re)) {
        alert("Verify the e-mail address format.");
        setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
        return false;
    } else {
        return true;
    }
}
// validate that the user made a selection other than default
function isChosen(select) {
    if (select.selectedIndex == 0) {
        alert("Please make a choice from the list.");
        return false;
    } else {
        return true;
    }
}

// validate that the user has checked one of the radio buttons
function isValidRadio(radio) {
    var valid = false;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert("Make a choice from the radio buttons.");
    return false;
}

function focusElement(formName, elemName) {
    var elem = document.forms[formName].elements[elemName];
    elem.focus();
    elem.select();
}

// batch validation router
function validateForm(form) {
    if (isNotEmpty(form.name1)) {
        if (isNotEmpty(form.name2)) {
            if (isNotEmpty(form.eMail)) {
                if (isEMailAddr(form.eMail)) {
                    if (isChosen(form.continent)) {
                        if (isValidRadio(form.accept)) {
                            return true;
                        }
                    }
                }
            }
        }
    }
    return false;
}
</script>
</head>
<body>
<h1>Form Validations</h1>
<hr /> 
<form method="GET" action=""
    name="sampleForm" onsubmit="return validateForm(this)">
First Name: <input type="text" size="30" name="name1" id="name1" 
    onchange="isNotEmpty(this)" /><br>
Last Name: <input type="text" size="30" name="name2" id="name2" 
    onchange="isNotEmpty(this)" /><br>
E-mail Address: <input type="text" size="30" name="eMail" id="eMail" 
    onchange="if (isNotEmpty(this)) {isEMailAddr(this)}" /><br>
Your Region: <select name="continent" id="continent">
    <option value="" selected>Choose One:</option>
    <option value="Africa">Africa</option>
    <option value="Asia">Asia</option>
    <option value="Australia">Australia/Pacific</option>
    <option value="Europe">Europe</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
</select><br>
Licensing Terms: 
    <input type="radio" name="accept" id="accept1" value="agree" />I agree
    <input type="radio" name="accept" id="accept2" value="refuse" />I do not agree
<br>
<input type="reset" /> <input type="submit" />
</form>
</body>
</html>

**ariful alam** · Aug 9 '12, 12:30 PM

To show a JavaScript Alert message you should validate your TextBox field in CodeBehind and on error you should register a JavaScript block to your .aspx page. It will show the message in JavaScript Alert message box.

**viki1967** · Aug 9 '12, 01:20 PM

Problem fixed, thanks a lot for help.

ErrorMessage "The field is required"

ErrorMessage "The field is required"

Comment

Comment

Comment