How to check values from a form before submitting it?

Question

What I want to do:

When I click on a submit button (which goes to for example Google) my script should...

append a "loading.gif" to a DIV with the ID = #loading to simulate that the page is loading and after that
check if the user filled out a form correctly. If not, a popup should appear.
After that it should go to GOOGLE

I know it is quite easy but I can't find the mistake in my code so far. My JSFiddle: http://jsfiddle.net/cZshY/

Example If someone puts the wrong university (Berlin instead of Hamburg) into the "university" field this should happen:

A loading.gif should appear.
After that a message should pop-up ("wrong university")

My HTML:

<div>
    <form>
        <p>Nickname: <input name="name" type="text" id="nickname"></p>
        <p>University: <input name="university" type="text" id="univer" value="University of Berlin">
        <p>Login: <input name="login" type="text" id="loginData" value="LE_StuRa"></p>
        <p>Password:<input name="passwordfield" type="password" id="passw" value="34kle1"></p>
    </form>
</div>

<div id="loading"></div>

<form action="http://google.com">
    <input type="submit" value="Continue" id="googleButton">
</form>

My Javascript/jquery:

$(document).ready(function(){
    $("#googleButton").click(function(){                
        var load = $("<img src='http://www.tj-auctions.com/images/loading.gif'/>"); 
        $(load).prependTo("#loading").fadeOut(3000, function(){

            if ( $("#loginData").val() != "LE_StuRa" || $("#univer").val() != "University of Hamburg" ) {
                alert ("Wrong login data");
                return false;
            }; 

            if ( $("#passw").val() != "34kle1" ) {
                alert ("Wrong password");
                return false;
            };

            if ( !$("#nickname").val() ) {
                alert ("Please enter a nickname!");
                return false;
            });

        }); 
    });
});

Your form is not correct. You the inputs and the submit are not in the same form. Combine them into one and instead of `click()` use `submit()`. in the submit function you can return false to cancel — Ibu, May 07 '14 at 21:41
@AnthonyHorne No, binding the click handler with jQuery is equivalent. — Barmar, May 07 '14 at 21:44
Check your Javascript console, you're getting a syntax error so none of the code is running. — Barmar, May 07 '14 at 21:46
You have an extra parenthesis after the `}` in the 3rd `if`. — Barmar, May 07 '14 at 21:46
Why do you wait until the `loading` GIF fades out before doing the validation? You should do validation immediately, and only display `loading` when you're loading something using AJAX. — Barmar, May 07 '14 at 21:48
Hi Barmar, thanks, I don't know how it got in there because in my original code I don't have a parenthesis there. So it's still not working :(. — OhDaeSu, May 07 '14 at 21:49
@Barmar: I want to "simulate" that actually something is happening. The user should think that the page is loading. It shouldn't actually load! — OhDaeSu, May 07 '14 at 21:50
OK, so validate the inputs, then simulate that the page is loading by displaying the GIF and then fading it out. — Barmar, May 07 '14 at 21:54
It works for me: http://jsfiddle.net/barmar/cZshY/11/. The fiddle doesn't go to Google because jsfiddle has the SAME-ORIGIN option enabled -- see the Javascript console. — Barmar, May 07 '14 at 21:59
I'm not quite sure whether I understand you correctly: If I validate the inputs first, the alert appears before the loading.gif? I actually want to have the opposite: first the "fake" loading, then the alert boxes. — OhDaeSu, May 07 '14 at 22:00
Oops, that was the wrong link: http://jsfiddle.net/barmar/cZshY/16/ — Barmar, May 07 '14 at 22:00
@Barmar: The problem is: If the user puts something wrong into any of the forms, the page should not go to google (instead it should show the alerts). I think in your JSFiddle the loading.gif appears but it goes to google nevertheless (although the university is incorrect). So I am thinking that I am missing an "return false" somewhere? — OhDaeSu, May 07 '14 at 22:03
Ahh, I see the problem. You're doing the validation in the callback function. Callbacks are asynchronous, so the `click` handler returns immediately, before the validation happens. You need to use `Deferred` if you wait to wait for the callback, and I'm not sure how to write that. Another reason why you should validate immediately, not wait 3 seconds. — Barmar, May 07 '14 at 22:07
oh ok, good to know that I cannot do validations in a callback function. Hmm, how strange that the problem is so difficult to solve since it seems to be so easy. — OhDaeSu, May 07 '14 at 22:18
@Barmar: ah, awesome, I solved it. You were right: I should've first check the condition and then do the "loading" stuff and alert stuff. thanks! Here is the jsFiddle: http://jsfiddle.net/cZshY/20/ — OhDaeSu, May 07 '14 at 22:40
@user3385759 Please add an answer rather than editing the question to include the answer. — Dave Newton, May 07 '14 at 22:49
possible duplicate of [JQuery form validation](http://stackoverflow.com/questions/965967/jquery-form-validation) — Jason Aller, May 07 '14 at 22:54

score 0 · Answer 1 · answered May 07 '14 at 23:14

0

remove the closing ')' after the last if statement.

The code should be

if ( !$("#nickname").val() ) {
  alert ("Please enter a nickname!");
  return false;
 };

answered May 07 '14 at 23:14

localghost

142
5

thanks. I didn't know how it got there because in my original code I don't have a parenthesis there (and it didn't work, too). But I've posted an answer if you're interested. – OhDaeSu May 07 '14 at 23:39

OhDaeSu · Answer 2 · 2014-05-07T23:50:39.983

Oh, ok, I figured it out (thanks to Barmar):

jsfiddle.net/cZshY/20

I've put the if-statements into the callback function of the fadeOut. When I check for the if-statements first and put the (1) "load the gif" and (2) "alert a message" into the if-statement, everything works fine.

The if-statement should look like this:

if ( $("#loginData").val() != "LE_StuRa" || $("#univer").val() != "University of Hamburg" ) {
    $(load).prependTo("#loading").fadeOut(3000, function(){
        $("#loading").html("Wrong university!");    // or alert, but I think this looks better.
    });
    return false;
};

How to check values from a form before submitting it?

2 Answers2