CODEWITHSUNDEEP
javascriptjqueryformsvalidation
DerekConlon
DerekConlon

Reputation: 463

Show a Hidden Div on submit but form isn't valid

I am using .slideToggle() to hide/show 2 div's that are part of the same form. The first section is the User Information and the second section is the order section.

Everything is working great except if the user has the top section (the user information) hidden through the slideToggle, but it is not valid (meaning a field is missing data or isn't the right data) when they click the Submit button it just highlights the fields red and puts a message in the bottom right corner of the browser (in this case, firefox) saying "this field isn't valid". But the user doesn't know which field isn't valid unless they click the div to make it activate slideToggle again.

I'm trying to make it so when a User clicks on the submit button, if the form isn't valid (using HTML5 "required" field or pattern) that it will show the hidden (through slideToggle) div so the user knows why their form didn't go through.

Here is the code i've tried so far:

$("form").submit(function(){
    var testvalue = "Hi!";
    alert(testvalue);
    if (!$(this).valid()) {
        $("#user_info_div_2").show();
        $("#user_info_div_3").show();
    }
});

I also tried:

("#po_form")

which is the ID of my form, instead of ("form"), but it wasn't any different.

What ive found is, this code only fires if the form is valid to begin with. (the alert is just how I test to make sure the code is firing) which means the submit() function only fires if the form is actually submitted (which makes sense).

I also tried:

$("#po_submit_button").click(function(){
    if (!$(this).valid()) {
        var testvalue = "Not Valid Form";
        alert(testvalue);
    }
});

This also had no affect on clicking the button.

I'm not using javascript validation so maybe that's why the .valid() is failing is because i'm not using it properly?

The form is simple, it just has "required" attributes on some of the fields and 1 of them uses a pattern attribute to make sure the state is only 2 characters. I can post the code of the form if you need it, but its "simple" by design but not simply written (lots of PHP inside it)

Is there a way I can make it run some .show() code if the form isn't valid?

If I need to read up on using javascript validation or even jquery validation I can but was hoping to just use HTML5. I really like the slideToggle() for making less info appear on the screen at once (cleaner look to it) but I can't have the submit button not do anything and the user be confused because the fields they need to fill out aren't on the screen (currently) either.

EDIT: Here is a fiddle

JSFiddle

This is how my current code is working. (or not working)

I'm trying to make it so if you have the user section not visible and not complete, and you click the button in the order section, the user section opens up so the user can see why their form didn't submit properly.

Upvotes: 0

Views: 754

Answers (1)

Sharjeel Ahmed
Sharjeel Ahmed

Reputation: 2061

From what I understand this code. 

$("#po_submit_button").click(function(){
    if (!$(this).valid()) {
        var testvalue = "Not Valid Form";
        alert(testvalue);
    }
});

needs to be changed to 

$("#po_submit_button").click(function(){
    if (!$("#po_form")[0].checkValidity()) {
        var testvalue = "Not Valid Form";
        $("#user_info_div_2").show();
    $("#user_info_div_3").show();
    }
});

Since your 'this' refers to the button not the form.

You need to use the function checkValidity() on the form element which is a built in Javascript func

Upvotes: 1

Related Questions