How to enter red text to right of form if value is null Java Script

Ho do i get red text entered if a user forgets to enter text ina  form.  I want the text to the right of the form and dont want a popup alert.  Just some text for the user to read.
enigma1234567890Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lee SavidgeCommented:
If you're using something like C# to generate the web page then use a RequiredFieldValidator control.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
enigma1234567890Author Commented:
Its java Script ?????
0
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Have spans with red text in them hidden. Based on your condition show them.
Hope this helps.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Lee SavidgeCommented:
Yes, I know you said. I was just wondering, if you had access to the back end code. As the page is a form, I am assuming (possibly incorrectly) that you may be in control of the underlying back end code. If so, and if it is a .NET based language then you could alter the page to use a RequiredFieldValidator.

If not, then much would depend on the type of field you're trying to validate. If it is a text field with an id of myTextField, then you could do something like this:

In the <body>  tag you could do something like this:

<body onsubmit="validateForm();">

Next to the field on the page have a hidden <div> tag like this:

<div id="myMessage" style="visibility:hidden"><font color="red">Please fill in the field</font></div>

Then in the page header you would have a function called validateForm(), for example:

<head>
<script language="javascript">
function validateForm()
{
  if (document.getElementById('myTextField').value = "")
  {
    document.getElementById('myMessage').style.visibility = 'visible';
    return false;
  }
  else
  {
    return true;
  }
}
</script>


I haven't tested this but something like this should be what you need.

Lee
0
kswathiCommented:
In your form place a span with its text color red.By default you need to hide the span

<input id="your_text_box" value=""'/><span id="spnError"  style ="color:Red;display:none;" >Enter Text</span>

<script>
function ValidateTextBox()
{
if(document.getElementById("your_text_box").value == '')
{
document.getElementById("spnError").style.display="block";
}

}
</script>
0
gery128Commented:
You can simply put following html markup at right side of the text-box:
<span id="spTxtNameError" style="color:Red; display:none;">Enter some text!</span>

It will not be visible on first load. when user submits the form you need to check with javascript that the textbox has some value, if not, just make that <span> visible:


HTML:
 <input type="text" id="txtName" onblur="CheckNull(this.value,'spTxtNameError');"/><span id="spTxtNameError" style="color:Red; display:none;">Error Text</span>

JavaScript code:
    function CheckNull(val, spanId) {
       if (val.length == 0)
           document.getElementById(spanId).style.display = 'block';
    }
0
Michel PlungjanIT ExpertCommented:
@lsavidge <FORM onsubmit, not BODY

@gery:

function CheckNull(val, spanId) {
  document.getElementById(spanId).style.display = (val.length == 0)?'block':'none';
}
0
Lee SavidgeCommented:
Ahh yes, you are correct :)
0
gery128Commented:
@mplungjan

Thanks for optimizing my code. However, I just posted it as one logic to achieve, optimizing the code is really depends on programmer implementing it :)
0
Michel PlungjanIT ExpertCommented:
I would not say resetting red text when the error was corrected is optimising - I call that mandatory :)
0
gery128Commented:
@mplungjan

oh! yeah, I did not notice that :)
Pasting some code-lines instantly has always some drawbacks ;)
0
enigma1234567890Author Commented:
thanks for all the help I have no code as I am about to do it
will try what was listed if anyone else has any advise please let me know
0
enigma1234567890Author Commented:
why do you use span ID
0
Michel PlungjanIT ExpertCommented:
So you only need one function

 <input type="text" id="txtFirstName" onblur="CheckNull(this.value,'spTxtFirstNameError');"/><span id="spTxtFirstNameError" style="color:Red; display:none;">Please enter First name </span>

 <input type="text" id="txtLastName" onblur="CheckNull(this.value,'spTxtLastNameError');"/><span id="spTxtLastNameError" style="color:Red; display:none;">Please enter Last name </span>

 <input type="text" id="txtEmail" onblur="CheckNull(this.value,'spTxtEmailError');"/><span id="spTxtEmailError" style="color:Red; display:none;">Please enter Email</span>

0
enigma1234567890Author Commented:
anyone got working java script still dont have answer
0
gery128Commented:
have you tried this?

HTML:
 <input type="text" id="txtName" onblur="CheckNull(this.value,'spTxtNameError');"/><span id="spTxtNameError" style="color:Red; display:none;">Error Text</span>

JavaScript code:
    function CheckNull(val, spanId) {
  document.getElementById(spanId).style.display = (val.length == 0)?'block':'none';
}
0
Michel PlungjanIT ExpertCommented:
@Enigma - you have all you need. Post some code if you need more help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.