/    Sign up×
Community /Pin to ProfileBookmark

form validation error

Copy linkTweet thisAlerts:
Apr 11.2005

Hi! cud anyone tell me where im goin wrong….the validation works…the alert message comes up wen the text boxes are empty however wen u click ok on the pop up msg it goes to the next page (form.jsp) but i dont want it to. can anyone spot wot im doin wrong?

<form name=”example” id=”example” action=”form.jsp” method=”post”>
<script type=”text/javascript”>
<!–

function formValidation(){
for(i=1;i<<%=i%>;i+=2){
var thing = document.getElementById(“text”+i);
if(!notEmpty(thing.value)){

return true;
}
}

var form = document.getElementById(“example”);
form.submit();
}

function notEmpty(elem){
var str = elem.length;
if(elem.length == 0){
alert(“You must fill in all fields”);
return false;
} else {
return true;

}
}

//–>
</script>

<input type=” button” name=”submit” value=”submit” onclick=”formValidation(this)” />

</form>

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorApr 11.2005 — The validate function is to be trigered by [b]onsubmit[/b] event handler from the form tag, not by [b]onclick[/b] in button's tag. It need a [b]return[/b] conditioner as well.

function validate(){

if(condition negative){

...do something, alert, etc....

return false

}

}


<form .... onsubmit="return validate()">
Copy linkTweet thisAlerts:
@KorApr 11.2005 — the algorithm is

  • - onsubmit [b]return[/b] ask for delay the action [b]submit[/b] till the function is completed

  • - [b]return false[/b] will cancel the [b]submit[/b] action


    • The reason for u must use onsubmit as event handler is simple. Applying [b]return false[/b] to the onclick will cancel the [i]click[/i] action, not the [i]submit[/i] action, as they are different things
    Copy linkTweet thisAlerts:
    @CharlesApr 11.2005 — The validate function is to be trigered by [b]onsubmit[/b] event handler from the form tag, not by [b]onclick[/b] in button's tag. It need a [b]return[/b] conditioner as well.

    function validate(){

    if(condition negative){

    ...do something, alert, etc....

    return false

    }

    }


    <form .... onsubmit="return validate()">[/QUOTE]    You'll save some typing, however, if you use the word "this" to pass a reference to the form.&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
    &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
    &lt;meta name="Content-Style-Type" content="text/css"&gt;
    &lt;title&gt;Example&lt;/title&gt;

    &lt;style type="text/css"&gt;
    &lt;!--
    fieldset {width:10em; padding:1em}
    label {display:block; font-weight:bold; margin:1em 0}
    input, button {display:block}
    button {margin:auto}
    --&gt;
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
    &lt;!--
    function check (f) {
    var e, i = 0;
    while (e = f.elements[['name', 'address'][i++]]) {if (!/S/.test (e.value)) {alert ('Please, field "' + e.previousSibling.data + '" is required.'); return false}}
    }
    // --&gt;
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;form action="somescript.pl" onsubmit="return check (this)"&gt;
    &lt;fieldset&gt;
    &lt;legend&gt;Example&lt;/legend&gt;
    &lt;label&gt;Name&lt;input name="name" type="text"&gt;&lt;/label&gt;
    &lt;label&gt;E-mail address&lt;input name="address" type="text"&gt;&lt;/label&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/fieldset&gt;
    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @KorApr 11.2005 — yes, sure, Charles. I wanted to point out only the principle of validate for mastap to understand. Sure, using [b]this[/b] will shorten the code as well...
    Copy linkTweet thisAlerts:
    @mastapauthorApr 11.2005 — hey guys ive took what you guys said on board...thanks. am i on the right lines? its just my first attempt using javascript.

    do u think id need to put in a loop so that the programme does not go on to

    the next page until the form validation condition is met??

    <form name="example" id="example" action="form.jsp" method="post" onsubmit="return validate(this)">

    <script type="text/javascript">

    <!--

    function formValidation(){

    for(i=1;i<<%=i%>;i+=2){

    var thing = document.getElementById("text"+i);

    if(!notEmpty(thing.value)){

    return true;

    }

    }

    var form = document.getElementById("example");

    form.submit();

    }

    function notEmpty(elem){

    var str = elem.length;

    if(elem.length == 0){

    alert("You must fill in all fields");

    return false;

    } else {

    return true;


    }

    }


    //-->

    </script>


    <input type="submit" name="submit" value="submit" onsubmit="formValidation(this)" />
    Copy linkTweet thisAlerts:
    @KorApr 11.2005 — 
  • - it depends on what <%=i%> means to your code

  • - you have not undestood what [b]this[/b] self reference is up to

  • - you have not conditioned the return

  • - you have some unuseful submit functions



    • can you tell us what is your final purpose, after all?
    Copy linkTweet thisAlerts:
    @mastapauthorApr 11.2005 — <%=i%> this is just jsp coding. i am putting this script in a jsp file you see. anyway all i am trying to do is get this javascript file so that all textfields are filled before it is sent to the next page. At the moment the validation alert comes up when all of the text fields are not filled however when you click on ok it takes you to the next page. this is what i dont want to happen. it must only go to the next page when all fields are filled.
    Copy linkTweet thisAlerts:
    @CharlesApr 11.2005 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
    &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
    &lt;meta name="Content-Style-Type" content="text/css"&gt;
    &lt;title&gt;Example&lt;/title&gt;

    &lt;style type="text/css"&gt;
    &lt;!--
    fieldset {padding:1ex; width:10em}
    label {display:block; font-weight:bold; margin:1em 0}
    input {display:block}
    button {display:block; margin:auto; margin-top:1em}
    --&gt;
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
    &lt;!--
    function check (f) {
    var e, i = 0;
    while (e = f.elements[i++]) {if (e.type == 'text' &amp;&amp; !/S/.test (e.value)) {alert ('Please, field "' + e.previousSibling.data + '" is required.'); e.focus(); return false}}
    }
    // --&gt;
    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;form action="some-script.pl" onsubmit="return check (this)"&gt;
    &lt;fieldset&gt;
    &lt;legend&gt;Giant Says&lt;/legend&gt;
    &lt;label&gt;Fee&lt;input type="text"&gt;&lt;/label&gt;
    &lt;label&gt;Fie&lt;input type="text"&gt;&lt;/label&gt;
    &lt;label&gt;Foe&lt;input type="text"&gt;&lt;/label&gt;
    &lt;label&gt;Fum&lt;input type="text"&gt;&lt;/label&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/fieldset&gt;
    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    ×

    Success!

    Help @mastap 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.18,
    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,
    )...