Using Jquery to prevent a "Submit Button" from posting data if a field is left blank

So I'm putting together a little registration area for my web project, here. The user inputs various strings such as "Username", "Password", etc.

I already have a bit of code set up in order to prevent duplicate Usernames or Passwords in the database. I also have a guard in place if the "Password" and "Repeat Password" fields don't match.

What I'm trying to do now is to -

1: If the user attempts to Submit data开发者_如何学Go while a field is blank, it will not post.

2: Display a "Fields cannot be blank" div I've assigned "display: none" to.

I was thinking something along the lines of assigning the input fields a class of "Required", and using some sort of code such as

if == null .show; return false; //To prevent the rest of the function (the submit button posting to login/register) from firing.

Running into obscene problems. Anyway. Here's what I have so far.

$("#SubmitButton").click(function () { //Click Submit
            if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
                $("#PasswordMismatch").show(); //Or this div shows you messed up
                return false; //And nothing else fires
            }


            $.post("login/register", $('#ConfirmPanel *').serialize(), function (result) {

                if (result == 2) //Json return from C#
                    $("#UsernameInUse").show(); //Shows an error div
                else if (result == 3) //Json return from C#
                    $("#EmailInUse").show(); //Shows an error div
                else {
                    $("#ConfirmPanel").dialog('close'); //Closes the registration dialog
                }

            });
        });

Any thoughts? At first I thought that I literally -cannot- use "class" to mark an input field, and then have that input field compared to a null value. I don't know, though.

You should use the .submit() jquery event handler on the form instead of .click() on the button. Then return false to prevent the normal form submission if needed.

Since you are trying to submit the form using $.post you should stop the default behavior of the form submit by alwasy returning false from submit button click handler.

$("#SubmitButton").click(function () { //Click Submit
            if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
                $("#PasswordMismatch").show(); //Or this div shows you messed up
                return false; //And nothing else fires
            }


            $.post("login/register", $('#ConfirmPanel *').serialize(), function (result) {

                if (result == 2) //Json return from C#
                    $("#UsernameInUse").show(); //Shows an error div
                else if (result == 3) //Json return from C#
                    $("#EmailInUse").show(); //Shows an error div
                else {
                    $("#ConfirmPanel").dialog('close'); //Closes the registration dialog
                }

            });

            return false;
        }); 

The jQuery way of preventing form submission is to use preventDefault(), like:

$("#SubmitButton").click(function (event) { //Click Submit
        if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
            $("#PasswordMismatch").show(); //Or this div shows you messed up
            event.preventDefault(); //And nothing else fires
            return;
        }

        //...
});

However, since you are posting the form asynchronously when validation passes, what you really want is something more along the lines of:

$("#SubmitButton").click(function (event) { //Click Submit
        event.preventDefault();  //we don't ever want to allow the default behavior
        if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
            $("#PasswordMismatch").show(); //Or this div shows you messed up
            return;
        }

        //post the form
});

The rest of what you suggest (using a class to mark each required input field, checking them all for empty strings) is reasonable.

Be aware that because you are binding the button's click event instead of the form's submit event it is entirely possible for the user to submit your form without ever clicking on your button and triggering your validation code. For instance, by pressing return from any one of your text fields.

Also note that in this case you may find it more convenient to just use a traditional onsubmit directive on the form, like:

<form onsubmit="validateAndPost(); return false;">
    <!-- inputs and buttons, etc. -->
</form>

<script>
    function validateAndPost() {
        if ($("#PassReg").val() != ($("#PassConfirm").val())) { //Both fields match
            $("#PasswordMismatch").show(); //Or this div shows you messed up
            return;
        }

        //post the form
    }
</script>

Example: http://jsfiddle.net/AwxGE/

I admire your desire to use jquery, however I would advise using a normal ASP.NET ReqiredFieldValidator control. As well as making your page substantially more concise and easy to maintain, it also allows you to very simply invoke server-side validation:

public void submitbutton_click(object sender, EventArgs args){
    Page.Validate();
    if(Page.IsValid){
        doStuff();
    }
}

Please don't reinvent the wheel, and don't trust the browser to behave as you think it will.

use this -

$(document).on('click', '#SubmitButton', function () { 
`enter code here`
});