Проверка плагинов jQuery и Ajax - PullRequest
Новая
       403

Проверка плагинов jQuery и Ajax

0 голосов
/ 31 июля 2011

Я использую плагин jQuery «Проверить» для проверки формы, которую я использую. Это работает, и для сообщений об ошибках требуется лишь немного стиля с помощью CSS.

Однако, это проблема. Я использую Ajax для отправки формы, поэтому, когда пользователь отправляет форму, форма исчезает, и появляется хорошее сообщение об успехе. НО, если пользователь пропустил обязательное поле, форма исчезает, и они видят сообщение об ошибке. Они могут нажать кнопку и увидеть форму и где ошибка. Теперь они исправляют ошибку, а затем снова нажимают «Отправить». Теперь они получают отправку формы в процессе, и форма не будет обрабатываться. Они должны обновить страницу, чтобы получить форму для отправки. Это боль и не очень хороший процесс для пользователя.

Вот вопрос: как мне проверить, что у пользователя есть поля во всех обязательных полях ДО они нажимают "Отправить" и избегают проблемы, упомянутой выше?

Спасибо за любые советы и помощь.

РЕДАКТИРОВАТЬ Добавлен код:

AJAX и проверочный код: 

<script type="text/javascript">
function jqsub() {

var $j = jQuery.noConflict();
var $jform = $j('#contactform'); // form ID
var $jmessagebox = $j('#ajaxdiv'); // message box ID
var $jsuccessmessage = "<h3>We will be in contact soon. </h3>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3><p class='light_button' id='errorbutton'>Return to Form </p><p>Please Note: You may have to refresh your page before you can submit the form again. We apologize for any inconvenience. </p><p>If the error continues please contact us at <a href='mailto:support@site.com'>Support@site.com</a></p>"; //error message in HTML format

$j.ajax({
    type: 'POST',
    url: $jform.attr('action'),
    data: $jform.serialize(), 
    success: function (msg) { 
                    if (msg.FormProcessV2Response.success) {
                    $jmessagebox.append($jsuccessmessage) 
                    $jmessagebox.fadeIn();
                    }
                    else {
                    $jmessagebox.append($jerrormessage) 
                    $jmessagebox.fadeIn();  
                    }    
            },
    error: function (msg) {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();
                },
   });
$jform.fadeOut("slow", function(){ //fade out of form after success
  $jmessagebox.fadeIn("slow");
});
$j("#errorbutton").live('click',function(){ //allows form to be faded in, in the event of an error
    $jmessagebox.fadeOut("slow", function(){
        $jform.fadeIn("slow");
    });
});

}
</script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j('#contactform').validate();
});
</script>

ФОРМАТ КОД: 

<form action="/FormProcessv2.aspx?WebFormID=45926&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&JSON=1" enctype="multipart/form-data" onsubmit="return checkWholeForm33499(this)" method="post" name="catwebformform33499" id="contactform">
<fieldset>
<input name="FullName" type="text" class="required cat_textbox" id="FullName" value="{module_fullname}" maxlength="255" />
<label for="FullName">Full  Name<span>required</span></label>
<input name="EmailAddress" type="text" class="required email cat_textbox" id="EmailAddress" value="{module_emailaddress}" maxlength="255" /><label for="email">Email Address<span>required</span></label>
<input name="CellPhone" type="text" class="required cat_textbox" id="CellPhone" value="{module_cellphone}" maxlength="255" /><label for="cellphone">Cell Phone<span>required</span></label>
</fieldset>
<fieldset>
<textarea onkeydown="if(this.value.length&gt;=1024)this.value=this.value.substring(0,1023);" class="required cat_listbox" rows="4" cols="10" id="CAT_Custom_254790" name="CAT_Custom_254790"></textarea></td>
<label for="message">Message<span>required</span></label>
</fieldset>
<fieldset>
<label>Verification <span>required</span></label>
{module_captchav2}
</fieldset>
<div>
<input type="submit" value="Send" tabindex="5" id="submit" name="submit" class="light_button_send" />
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount33499 = 0;function checkWholeForm33499(theForm){var why = "";if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if(why != ""){alert(why);return false;}if(submitcount33499 == 0){submitcount33499++;jqsub();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script>
</form>

1 Ответ

1 голос
/ 31 июля 2011

Почему бы просто не включить вызовы fadeIn и fadeOut в функцию успеха $ .ajax?

Что-то вроде 

$j.ajax({
    .
    .
    .
    success: function (msg) { 
                if (msg.FormProcessV2Response.success) {
                    $jmessagebox.append($jsuccessmessage) 
                    $jmessagebox.fadeIn();
                    $jform.fadeOut("slow"
                                   , function(){ //fade out of form after success
                                       $jmessagebox.fadeIn("slow");
                    });
                }
                else {
                    $jmessagebox.append($jerrormessage) 
                    $jmessagebox.fadeIn();  
                }    
        },
        .
        .
        .
});

Таким образом, он исчезает, только если ошибок не было.

Что касается вашей проблемы с повторным представлением, виновником является 

if(submitcount33499 == 0){
   submitcount33499++;
   jqsub();
   return false;
}
else{
   alert("Form submission is in progress.");
   return false;
}

Когда форма отправляется в первый раз, submitcount33499 получает вложение (поскольку она должна иметь значение 0 в первый раз. Во второй раз тест не пройден и переходит в ветвь else.

Почему вы все равно отслеживаете, подсчитывает ли количество заявок?

...