9

I am creating a simple JS validation for my HTML form. The validation checks if the fields are empty and in some cases checks both, if they're empty and input !numbers. This check works well but what I am also trying to achieve is to highlight the field in red if JS detects invalid input. I have coded some JS to style the input field if the input is invalid but it is the highlight that does not work.

JS snap

function FormValidation(){
//First Name Validation 
    var fn=document.getElementById('firstname').value;
    if(fn == ""){
        alert('Please Enter First Name');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
        alert("First Name Contains Numbers!");
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if(fn.length <=2){
        alert('Your Name is To Short');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }

HTML snap

<form action="" method="post" onsubmit="return FormValidation();" onchange="return FormValidation();">        
    <div class="input-wrapper">
        <input type="text" placeholder="First Name" id="firstname" name="name"/>
    </div>
</form>

I'm quite sure the highlight should work. I've done similar validation before but unfortunately, this time can't get the result I'm after.

1
  • Tip: If you cache var firstName = document.getElementById('firstname') you'll make your code easier to read and better performing.
    – elclanrs
    Commented Jan 15, 2014 at 0:49

3 Answers 3

7

You're missing a } at the end, but other than that, it seems to work just fine.

Here's a working fiddle: http://jsfiddle.net/aJ2Tw/

And the revised code:

 function FormValidation(){
    //First Name Validation 
    var fn=document.getElementById('firstname').value;
    if(fn == ""){
        alert('Please Enter First Name');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
        alert("First Name Contains Numbers!");
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if(fn.length <=2){
        alert('Your Name is To Short');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
}
6

if ($('#TextBoxID').val() == '') { $('#TextBoxID').css('border-color', 'red'); } else { $('#TextBoxID').css('border-color', ''); }

0

This should do the trick. You will want that after the user goes to fill out that input, the border color disappears so using border-color isn't the best way to go. You can try it out with the snippet.

document.getElementById('fieldtobered').classList.add("red");

document.getElementById('fieldtobegreen').classList.add("green");
.red {
    outline: 1px solid red;
}

.green {
    outline: 1px solid green;
}
<input type="text" id="fieldtobered" value="" />
<br>
<input type="text" id="fieldtobegreen" value="" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.