/    Sign up×
Community /Pin to ProfileBookmark

Form validation problem

Copy linkTweet thisAlerts:
Sep 01.2004

Hi, as you can see below on my page I have a checkbox and text input box, there are a number of these on the page. The checkbox is always “orderxxx” where xxx is a number while the text input box is always “orderxxx_q”, an example being:

<input name=”order223″ type=”checkbox” value=”MailTuff”>
<input name=”order223_q” type=”text”>

Is there any way when the user presses submit that the form wont submit unless both have been checked/entered? Bear in mind that there are a few of these on the page and if the user doesnt want to order something he/she will simply leave both blank. I’m just looking to validate if he/she checks the box but doesnt enter a value or enters a value but doesnt check the box.

Please help!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@sciguyryanSep 01.2004 — Try something like:

<i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--
function CheckInput(){
var CheckBox = document.getElementById("Your Checkbox ID here");
var TextBox = document.getElementById("Your Textbox ID here");
if ((!CheckBox.checked &amp;&amp; TextBox.value &gt; 0) || (TextBox.value == "" &amp;&amp; CheckBox.checked)){
return false;
}
else{
return true;
}
}
//--&gt;
&lt;/script&gt;



Than for the onsubmit call you would do:

<i>
</i>OnSubmit="return CheckInput();"



Hope that helps,

RyanJ
Copy linkTweet thisAlerts:
@denhamd2authorSep 01.2004 — does it have to be done by the form element's ID? can it be done by the name? also do I have to do this manually ("Your Checkbox ID here") for all the form inputs?
Copy linkTweet thisAlerts:
@sciguyryanSep 01.2004 — [i]Originally posted by denhamd2 [/i]

[B]does it have to be done by the form element's ID? can it be done by the name? also do I have to do this manually ("Your Checkbox ID here") for all the form inputs? [/B][/QUOTE]

1) No, either ID or Name will work fine (getElementById() treats Name and ID as the same).

2) I presumed that you only needed it for two, too check multiple the script would need to be changed.
Copy linkTweet thisAlerts:
@denhamd2authorSep 01.2004 — do you know of any matching rule that could do this?
Copy linkTweet thisAlerts:
@sciguyryanSep 01.2004 — You can probably use a for loop to go through every element in the form easily enough.



RyanJ
Copy linkTweet thisAlerts:
@denhamd2authorSep 01.2004 — does any know some script that would do this? help would be much appreciated...
Copy linkTweet thisAlerts:
@CharlesSep 01.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<script type="text/javascript">

<!--

function fail (e) {

alert ('Field ' + String (e.previousSibling ? e.previousSibling.data : e.nextSibling.data).replace (/^s+/, '').replace(/s$/, '') + ' is required.');

e.focus();

return false;

}


function check (f) {

var i, e;

for (i = 0; e = f.elements[i]; i++ ) {

if (e.type == 'text' && !/S/.test (e.value)) return fail(e);

if (e.type == 'checkbox' && !e.checked) return fail (e);

}

}

// -->

</script>



<style type="text/css">

<!--

form {width:15em}

fieldset {padding:1ex}

label {display:block}

button {display:block; margin:auto}

-->

</style>



</head>

<body>

<form action="someScript.pl" onsubmit="return check (this)">

<fieldset>

<legend>Example</legend>



<label><input type="checkbox"> Fee</label>

<label>Fee <input type="text"></label>



<label><input type="checkbox"> Fie</label>

<label>Fie <input type="text"></label>



<label><input type="checkbox"> Foe</label>

<label>Foe <input type="text"></label>



<label><input type="checkbox"> Fum</label>

<label>Fum <input type="text"></label>



<button type="submit">Submit</button>

</fieldset>

</form>

</body>

</html>[/font]
×

Success!

Help @denhamd2 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.16,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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