/    Sign up×
Community /Pin to ProfileBookmark

Required Field Javascript

Copy linkTweet thisAlerts:
Feb 15.2011

Hi , I hope someone can help me, I think it really should be easy but I don’t know much Javascript. I am trying to make a required field of a text area called “Message”. How can I show required only if the “Yes” button is selected. This is my script:

var x=document.forms[“myForm”][“Message”].value
if (x==null || x==””)

{
alert(“Message” must be filled out”);
return false;
}

<I><B>Include a Card:</p>

<input type=”checkbox” onclick=”SetState(this, myForm.Message)”>Yes<br>
<B><I>Personal Message On Card……….</I></B>
<textarea col=”30″ rows=”10″ name=”Message” disabled>Please write your comments here:</textarea>

Thanks in anticipation.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JavaScriptNickFeb 15.2011 — [CODE]
<html>
<head>
<script type="text/javascript">

var isChecked = function(){
var checked = document.getElementById("chk1").checked;
if (checked){
document.getElementById("Message").disabled = false;
}
else {
document.getElementById("Message").disabled = true;
}
}

onload = function(){
document.getElementById("chk1").onclick = isChecked;
}
</script>
</head>
<body>
Include a Card:

<input id="chk1" type="checkbox">Yes<br>
<B><I>Personal Message On Card..........</I></B>
<textarea id="Message" col="30" rows="10" disabled="disabled">Please write your comments here:</textarea>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@tirnaFeb 15.2011 — If it's a required field then you also have to ensure the user entered some non blank characters in it. If you don't also check for that, then it really makes no diffrence if the field is enabled or not if there is nothing valid entered in it
Copy linkTweet thisAlerts:
@NannynewbyauthorFeb 15.2011 — Hi thanks JavaScriptNick, that works as far as the checkbox etc is concerned but how do I make "Message needs to be filled in" when the "Yes" box is selected and no message is written? Thanks again.
Copy linkTweet thisAlerts:
@JavaScriptNickFeb 16.2011 — Test this, but this should work. You probably would need to check that the default message wasn't entered either, or remove it.

[CODE]
<html>
<head>
<script type="text/javascript">

var isChecked = function(){
var checked = document.getElementById("chk1").checked;
if (checked){
document.getElementById("Message").disabled = false;

}
else {
document.getElementById("Message").disabled = true;
}
}

var checkField = function(){
var txtArea = document.getElementById("Message");
if (txtArea.value == ""){
alert("Message cannot be empty");
txtArea.focus();
document.getElementById("btn").disabled=true;
}
else { document.getElementById("btn").disabled=false; }

}

onload = function(){
document.getElementById("chk1").onclick = isChecked;
document.getElementById("Message").onblur = checkField;
}
</script>
</head>
<body>
Include a Card:

<input id="chk1" type="checkbox">Yes<br>
Personal Message On Card..........
<textarea id="Message" col="30" rows="10" disabled="disabled">Please write your comments here:</textarea>
<br>
<input type="button" id="btn" value="Submit"/>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@NannynewbyauthorFeb 18.2011 — Thankyou very much JavascriptNick for that. It's good now. Thanks again.
×

Success!

Help @Nannynewby spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...