Проверка не работает правильно - PullRequest
0 голосов
/ 18 июня 2011

Я пытаюсь заставить мой валид работать, нажав кнопку «Отправить». Я не хочу, чтобы исчезновение происходило, если все в форме не правильно. Моя проверка работает на странице, но не при нажатии кнопки «Отправить». Я не хочу, чтобы она использовала мою функцию скрытия, если вся форма не проверена правильно. Вот мой код Есть что-нибудь, что выскочило к вам, ребята? Исправлена ​​формулировка вопроса:)

<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>

Вот мой 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>  

Ответы [ 2 ]

2 голосов
/ 19 июня 2011

Извините, что так долго; Я должен был пойти в оперу. Способ явно проверить правильность формы - вызвать ".valid ()" и проверить результат; он возвращает true, если форма действительна в соответствии с правилами, установленными вами во время инициализации:

    $("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 голосов
/ 18 июня 2011

ИМХО, вы должны использовать один и тот же селектор для обоих событий:

$("form[name=emailSubmit]").validate({

$("form#emailSubmit").submit(function() {

Кстати, при использовании селектора с "id" (emailSubmit) вам не нужно использовать тег (форма) селектор.В прежних версиях jquery (<1.4, если я хорошо помню), это было еще медленнее. </p>

В конце концов, я не очень понимаю:

Моя проверка работоспособности работает, но непри нажатии на кнопку отправки.

Что вы подразумеваете под проверкой перед кликом VS?

С уважением,

Макс

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...