So I'm trying to validate a form and I'm not being able to get the textbox change when the validation fails. Instead, the form gets pleted. What I want is if the validation fails, the textbox border bees color red and a text in red just below the textbox which says "Fill our this field!"

Here's what I have written just for the purpose of testing and it's not working and I'm not sure how to add the red=colored text just after the box concerned:

<form id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <button type="submit">Register</button>
</form> 


function validate(){
    var formIsValid = true;

    if(first.value === ""){
        //Not sure how to add Red-Colored Text below the box which says "Fill our this field!"
        first.borderColor = "red"; //NOT WORKING
        formIsValid = false;    
    }

    return formIsValid;

}

So I'm trying to validate a form and I'm not being able to get the textbox change when the validation fails. Instead, the form gets pleted. What I want is if the validation fails, the textbox border bees color red and a text in red just below the textbox which says "Fill our this field!"

Here's what I have written just for the purpose of testing and it's not working and I'm not sure how to add the red=colored text just after the box concerned:

<form id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <button type="submit">Register</button>
</form> 


function validate(){
    var formIsValid = true;

    if(first.value === ""){
        //Not sure how to add Red-Colored Text below the box which says "Fill our this field!"
        first.borderColor = "red"; //NOT WORKING
        formIsValid = false;    
    }

    return formIsValid;

}

• javascript
• html
• validation
• dom

• Have you omitted the <script>...</script> tags around your function? – Graham Commented Nov 9, 2013 at 19:06
• @Graham No The function is in an external javascript file and it's called in the HTML head – Please Delete me Commented Nov 9, 2013 at 19:08
• 1 It looks like you're trying to reference the element's id without using the document.getElementById function. Instead of referencing "first" reference document.getElementById("first"). – Brian Shamblen Commented Nov 9, 2013 at 19:09
• i used var first = document.getElementById("first") before using it in the function. It should be working, but it's not. – Please Delete me Commented Nov 9, 2013 at 19:13

2 Answers 2

I believe this is what you are looking for,

http://jsfiddle/F8H7Y/

<form name= "reg" id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <input type="submit">Register</button>
</form> 



function validate(){
    var formIsValid = true;
    var first=document.forms["reg"]["first"];
    if(first.value == null || first.value == ""){
        first.style.borderColor = "red";
        formIsValid = false;    
    }

    return formIsValid;

}

Have a look on this post

I think for text, you can use empty lable to make a text appear just below the textbox which say "Fill this textbox" on validation failure.