• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

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.
0
enigma1234567890
Asked:
enigma1234567890
  • 4
  • 4
  • 4
  • +3
8 Solutions
 
Lee SavidgeCommented:
If you're using something like C# to generate the web page then use a RequiredFieldValidator control.
0
 
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 4
  • 4
  • 4
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now