Question

83

validation of input text field in html using javascript

rated 0 times [ 89] [ 6] / answers: 1 / hits: 159687 / 12 Years ago, mon, september 17, 2012, 12:00:00

<script type='text/javascript'>   

function required()  

{

    var empt = document.forms[form1][Name].value; 

    if (empt == )  

    {  

        alert(Please input a Value);  

        return false;  

    }  

}  

</script> 



<form name=form1 method= action=>

<input type=text name=name value=Name/><br />

<input type=text name=address line1 value=Address Line 1/><br />

I have more than one input text field, each having their default value. Before I submit the form I have to verify whether all fields are filled. So far i got the javascript to check for null since different text boxes have different default value. How can I write a javascript to verify that user has entered data? I mean, the script must identify that input data is other than default and null.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jase

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Sao Tome and Principe

Member since Wed, Dec 29, 2021

2 Years ago

answered 12 Years ago dominickmackenziet · Accepted Answer

If you are not using jQuery then I would simply write a validation method that you can be fired when the form is submitted. The method can validate the text fields to make sure that they are not empty or the default value. The method will return a bool value and if it is false you can fire off your alert and assign classes to highlight the fields that did not pass validation.

HTML:

<form name=form1 method= action= onsubmit=return validateForm(this)>

<input type=text name=name value=Name/><br />

<input type=text name=addressLine01 value=Address Line 1/><br />

<input type=submit/>

</form>

JavaScript:

function validateForm(form) {



    var nameField = form.name;

    var addressLine01 = form.addressLine01;



    if (isNotEmpty(nameField)) {

        if(isNotEmpty(addressLine01)) {

            return true;

        {

    {

    return false;

}



function isNotEmpty(field) {



    var fieldData = field.value;



    if (fieldData.length == 0 || fieldData ==  || fieldData == fieldData) {



        field.className = FieldError; //Classs to highlight error

        alert(Please correct the errors in order to continue.);

        return false;

    } else {



        field.className = FieldOk; //Resets field back to default

        return true; //Submits form

    }

}

The validateForm method assigns the elements you want to validate and then in this case calls the isNotEmpty method to validate if the field is empty or has not been changed from the default value. it continuously calls the inNotEmpty method until it returns a value of true or if the conditional fails for that field it will return false.

Give this a shot and let me know if it helps or if you have any questions. of course you can write additional custom methods to validate numbers only, email address, valid URL, etc.

If you use jQuery at all I would look into trying out the jQuery Validation plug-in. I have been using it for my last few projects and it is pretty nice. Check it out if you get a chance. http://docs.jquery.com/Plugins/Validation