i need help making a status bar label

StackOverflow https://stackoverflow.com/questions/22177555

  •  05-06-2023
  •  | 
  •  

Question

I need to make a labeled button that checks all the previous boxes I have above it and then reports back whether they are valid or not by putting the status on the screen after the button without popping up an alert, I am doing this in JavaScript so any help would be appreciated.

Here is what I have so far:

<!DOCTYPE html>
    <html>
        <head>
        <script>
            function myFunction(x){
                x.style.background="yellow";
            }

            function validateForm(){
                var Fid=document.getElementById("firstName").value;
                if (Fid.length < 3) {
                    alert("first id is not valid");
                    return;
                }
                var Lid=document.getElementById("lastName").value;
               if (Lid.length < 3) {
                   alert("Last id is not valid");
                   return;
               }

               var Age=document.getElementById("age").value;
               if (Age.length == 0) {
                   alert("Age is not valid");
                   return;
               }
           } //End validateForm()

           <script language="javascript">
               function checkEmail() {

                   var email = document.getElementById("email");
                   var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                   if (!filter.test(email.value)) {
                       alert("Please provide a valid email address");
                       email.focus;
                       return false;
                   }
               } 
           </script>
     </script>
 </head>
 <body>
       First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
      Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
      Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
      E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
     <label id="status">status</label><br>
     <button id="CheckButton" onClick="return validateForm();">Check Form</button>
 </body>
</html>

No correct solution

OTHER TIPS

Instead of alerting, just set the innerHTML of your status label:

var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
    var status = document.getElementById('status');
    status.innerHTML = status.innerHTML + '<br>First id is not valid';
    //alert("first id is not valid");
    return;
}

Based on your comment, modify your HTML like so:

First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
<span id="status">status</span><br>
<div id='firstNameDiv' style='display: none'>First id is not valid</div>
<div id='lastNameDiv' style='display: none'>Last is id not valid</div>
<div id='ageDiv' style='display: none'>Age is not valid</div>
<div id='emailDiv' style='display: none'>Email is not valid</div>
<button id="CheckButton" onClick="return validateForm();">Check Form</button>

And your javascript like this:

var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
    document.getElementById('firstNameDiv').style.display = "";
}
else {
    document.getElementById('firstNameDiv').style.display = 'none';
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top