0

I have a form validation code for which it is supposed to give a red background color if someone leaves it empty or enters an integer in the first name input text box, the code is working but for some reason whenever I hit submit it turns red for less than a second a goes away. How can i make the text box appear red permanently. The HTML and JavaScript codes are below, if someone can help that would be appreciated

HTML

<html>
<head>
<script src="Scripts/Asgn_3_2.js"></script>
</head>
<body>
<form name="registration">
<div>
    First Name:<input type="text" placeholder="Enter Your First Name" 
size="20" id="fname" /><br/><br/>
    Last Name:<input type="text" placeholder="Enter Your Last Name" 
size="20" id="lname"/><br/><br/>
    Gender: <input type="radio" value="Male" id="mgender" />Male &nbsp&nbsp 
<input type="radio" value="Female" id="fgender" />Female <br/><br/>
    <select>
        <option>AL</option>
        <option>CA</option>
        <option>FL</option>
        <option>IL</option>
        <option>KS</option>
        <option>MN</option>
    </select> <br/><br/><br/><br/>
    <input type="checkbox" value="I Accept the terms"/>I Accept the terms 
<br/><br/>
    <button onclick="submitbutton()">Submit</button>
</div>
</form>

</html>

JAVASCRIPT

function submitbutton(){
if (document.getElementById("fname").value == 0){
document.getElementById("fname").style.backgroundColor="red"; 
}
else if (!isNaN(document.getElementById("fname").value)){
document.getElementById("fname").style.backgroundColor="red";
}
if (document.getElementById("lname").value == 0){
document.getElementById("lname").style.backgroundColor="red";  
}
else if (!isNaN(document.getElementById("lname").value)){
document.getElementById("lname").style.backgroundColor="red";  
}

}

3 Answers 3

0

On submit validation failure return false else return true. Your code should be like this

    <html>
<head>
<script src="Scripts/Asgn_3_2.js"></script>
</head>
<body>
<form name="registration">
<div>
    First Name:<input type="text" placeholder="Enter Your First Name" 
size="20" id="fname" /><br/><br/>
    Last Name:<input type="text" placeholder="Enter Your Last Name" 
size="20" id="lname"/><br/><br/>
    Gender: <input type="radio" value="Male" id="mgender" />Male &nbsp&nbsp 
<input type="radio" value="Female" id="fgender" />Female <br/><br/>
    <select>
        <option>AL</option>
        <option>CA</option>
        <option>FL</option>
        <option>IL</option>
        <option>KS</option>
        <option>MN</option>
    </select> <br/><br/><br/><br/>
    <input type="checkbox" value="I Accept the terms"/>I Accept the terms 
<br/><br/>
    <button onclick="return submitbutton()">Submit</button>
</div>
</form>
<script>
function submitbutton(){
var isValidated=true;
if (document.getElementById("fname").value == 0){
document.getElementById("fname").style.backgroundColor="red"; 
isValidated=false;
}
else if (!isNaN(document.getElementById("fname").value)){
document.getElementById("fname").style.backgroundColor="red";
isValidated=false;
}
else{
document.getElementById("fname").style.backgroundColor="#fff";
isValidated=true;
}
if (document.getElementById("lname").value == 0){
document.getElementById("lname").style.backgroundColor="red";  
isValidated=false;
}
else if (!isNaN(document.getElementById("lname").value)){
document.getElementById("lname").style.backgroundColor="red";  
isValidated=false;
}
else
{document.getElementById("lname").style.backgroundColor="#fff";  
isValidated=true;}
return isValidated;
}
</script>
</html>

You have to remove textbox color on successful validation. You need to add validation for other control as well.

6
  • I tried it right now as per your recommendation but it did not help @Kalpesh
    – user9182841
    Jan 9, 2018 at 5:48
  • Now it works but only for the first name text box, last name is still not working, can you please setup run code snippet here so it will show the result here or if possible jsfiddle @Kalpesh
    – user9182841
    Jan 9, 2018 at 6:20
  • I have updated the answer. You need to add validation for radio button, checkbox also. Jan 9, 2018 at 6:33
  • Yes I have to do an alert for the radio button, state and accept the terms checkbox if they are not selected, but since I was stuck here i was not able to go any further @Kalpesh
    – user9182841
    Jan 9, 2018 at 6:39
  • Thanks,It is working perfectly fine for the first and last name, any idea how would it work for the remaining 3, I am still in the learning phase @Kalpesh
    – user9182841
    Jan 9, 2018 at 6:44
0

You should return false to avoid any further action being processed by the button.

function submitbutton(){
if (document.getElementById("fname").value == 0){
  document.getElementById("fname").style.backgroundColor="red"; 
  return false;
}
else if (!isNaN(document.getElementById("fname").value)){
  document.getElementById("fname").style.backgroundColor="red";
  return false;
0
0

Use the jquery library for this kind of functionality.

$('#register').submit(function(e){
  e.preventDefault();
  if($('#fname').val() == 0 || !isNaN($('#fname').val())){
    $('#fname').css('background-color', 'red');
  }else{
   $('#fname').css('background-color', '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="Scripts/Asgn_3_2.js"></script>
</head>
<body>
<form name="registration" id="register">
<div>
    First Name:<input type="text" placeholder="Enter Your First Name" 
size="20" id="fname" /><br/><br/>
    Last Name:<input type="text" placeholder="Enter Your Last Name" 
size="20" id="lname"/><br/><br/>
    Gender: <input type="radio" value="Male" id="mgender" />Male &nbsp&nbsp 
<input type="radio" value="Female" id="fgender" />Female <br/><br/>
    <select>
        <option>AL</option>
        <option>CA</option>
        <option>FL</option>
        <option>IL</option>
        <option>KS</option>
        <option>MN</option>
    </select> <br/><br/><br/><br/>
    <input type="checkbox" value="I Accept the terms"/>I Accept the terms 
<br/><br/>
    <input type="submit">
</div>
</form>

</html>

2
  • Thanks for the help @Kirit
    – user9182841
    Jan 9, 2018 at 5:41
  • @John If is it helpful, please don't forget to accept the answer so it can be helpful to others also.
    – Kirit
    Jan 9, 2018 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy