Home/ Questions/Q 6052133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:53:41+00:00

I am trying to get my validate to work upon clicking my submit button.

  • 0

I am trying to get my validate to work upon clicking my submit button. I don’t want the fade out to occur unless everything in the form is right. My validation works on the page, but not when clicking the submit button..I don’t want it to use my hide function unless the whole form is validated correctly. Here is my code. Anything here that jumps out to you guys? Fixed the wording of the question 🙂

<script type="text/javascript">  
    $(document).ready(function($){
        $.supersized({
            //Background image
            slides  :  [ { image : 'images/pendulumWeb.jpg' } ]                 
        });

        $("form[name=emailSubmit]").validate({
            rules: {
                title: {
                    required: true
                },
                fName: {
                    required: true
                },
                lName: {
                    required: true
                },
                profession: {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    number: true
                }

            },
            messages: {
                title: {
                    required: "Please enter your title."
                },
                fName: {
                    required: "Please enter your first name"
                },
                lName: {
                    required: "Please enter your last name."
                },
                profession: {
                    required: "Please enter your profession"
                },
                email: {
                    required: "Please enter your email"
                }
            }
        });

        $("form#emailSubmit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var title = $('#title').attr('value');
            var fName = $('#fName').attr('value');
            var lName = $('#lName').attr('value');
            var profession = $('#profession').attr('value');
            var email = $('#email').attr('value');
            var phone = $('#phone').attr('value');
            var message = $('#message').attr('value');
                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: "title="+ title +"& fName="+ fName +"& lName="+ lName +"& profession="+ profession +"& email="+ email +"& phone="+ phone +"& message="+ message,
                    success: function(){
                         $('form#emailSubmit').hide(0,function() {
                            $('div#contact').fadeOut('fast  ');
                            $('div.success').fadeIn(3000);
                        });
                    }
                });
            return false;
            });

            $('#contact').animate({height: '+=600px'}, 3000, 'easeInOutExpo');
            $('#content').fadeIn(6000);


        });


</script>

Here is my html

<body>

<form id="emailSubmit" name="emailSubmit" method="post">
    <div id="submit">
        <table>
            <tr style="height: 20px;">
                <td><span class="formTitles">Title*</span></td>
                <td><input id="title" name="title" value="" size="5" max="3" type="text" />
             </td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">First Name*</span></td>
                <td><input id="fName" name="fName" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Last Name*</span></td>
                <td><input id="lName" name="lName" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Profession*</span> </td>
                <td><input id="profession" name="profession" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Email*</span> </td>
                <td><input id="email" name="email" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Phone</span></td>
                <td><input id="phone" name="phone" value="" size="20" type="text" /></td>
            </tr>
            <tr style="height: 20px;">
                <td><span class="formTitles">Message</span></td>
                <td><textarea name="message" id="message" cols="50" rows="5"></textarea></td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td></td>
            </tr>
        </table>
        <table>
            <tr>
                <td><span class="formTitles"></span></td>
                <td><button class="buttonPositive" type="submit"> Submit</button></td>
            </tr>
        </table>    
    </div>
</form>

<div id="contact">
    <div id="content" style="display: none;">

    </div>
</div>

    <div class="success" style="display: none;">
    </div>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sorry to have taken so long; I had to go to an opera. The way to check form validity explicitly is to call “.valid()” and check the result; it returns true if the form is valid according to the rules you set up at initialization time:

        $("form#emailSubmit").submit(function() {
        if (!$(this).valid()) {
          alert("Naughty naughty!");
          return false;
        }

        // we want to store the values from the form input box, then send via ajax below
        ...
    • 0