JavaScript内からjQuery AJAXを実装する

Question

私は、アプリケーションのクライアント側の検証のためにHTML5制約検証を手助けするためにtutorial from css-tricksを使用しました。私は、フォームを提出するAJAXスクリプトを紹介して、ページを再読み込みしないようにしたいと思っています。（フォームがモーダルポップアップで表示され、提出時に閉じたくないので）

オンラインで収集したものからこれを行うにはjQueryを使用するのが最善の方法だと思われます。ただし、検証スクリプトは通常のJavascriptで記述されています。

これを私の検証スクリプト内でどのように実装するのか混乱しているので、別のjsファイルに別のhttp要求をする必要はありません。既存のスクリプトとシームレスに連携する必要があります）。競合を防ぐために、既存のスクリプト内でjQueryを呼び出すだけですか（下の図を参照）。準備完了イベントでスクリプト全体をラップする必要がありますか？

現在のところ、なぜこれが機能していないのかわかりません。フォームは依然としてページを送信して再読み込みするので、Ajaxの送信機能は無視されているようです。

以下はそのPHPクラスからフォームのマークアップと検証とAJAXを使用form.validate.jsファイルが含まれています。ここでは

function copyTxtVal(bf) { 
    if(bf.samecheck.checked == true) { 
     bf.contact_name_first.value = bf.cpap_sup_name_first.value; 
     bf.contact_name_last.value = bf.cpap_sup_name_last.value; 
    } else { 
     bf.contact_name_first.value = ''; 
     bf.contact_name_last.value = ''; 
    } 
} 

// Add the novalidate attribute when the JS loads 
var forms = document.querySelectorAll('.validate'); 

for (var i = 0; i < forms.length; i++) { 
    forms[i].setAttribute('novalidate', true); 
} 

// Validate the field 
var hasError = function (field) { 

    // Don't validate submits, buttons, file and reset inputs, and disabled fields 
    if(field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return; 

    // Get Validity 
    var validity = field.validity; 

    // Get valid, return null 
    if(validity.valid) return; 

    // If field is required and empty 
    if (validity.valueMissing) return 'Please fill out this field.'; 

    // If not the right type 
    if (validity.typeMismatch) { 

     if(field.type === 'email') return 'Please enter an email address.'; 

     if(field.type === 'url') return 'Please enter a URL.'; 
    } 

    // If too short 
    if (validity.tooShort) return 'Please lengthen this text to ' + field.getAttribute('minLength') + ' characters or more. You are currently using ' + field.value.length + ' characters.'; 

    // If too long 
    if (validity.tooLong) return 'Please short this text to no more than ' + field.getAttribute('maxLength') + ' characters. You are currently using ' + field.value.length + ' characters.'; 

    // If number input isn't a number 
    if (validity.badInput) return 'Please enter a number.'; 

    // If a number value doesn't match the step interval 
    if (validity.stepMismatch) return 'Please select a valid value.'; 

    // If a number field is over the max 
    if (validity.rangeOverflow) return 'Please select a smaller value.'; 

    // If a number field is below the min 
    if (validity.rangeUnderflow) return 'Please select a larger value.'; 

    // If pattern doesn't match 
    if (validity.patternMismatch) { 

     // If pattern info is included, return custom error 
     if (field.hasAttribute('title')) return field.getAttribute('title'); 

     // Otherwise, generic error 
     return 'Please match the requested format.'; 
    } 

    // If all else fails, return a generic catchall error 
    return 'The value you entered for this field is invalid.'; 

}; 

var showError = function(field, error){ 
    // Add error class to field 
    field.classList.add('error'); 

    // Get field id or name 
    var id = field.id || field.name; 
    if (!id) return; 

    // Check if error message field already exists 
    // If not, create one 
    var message = field.form.querySelector('.error-message#error-for-' + id); 
    if (!message) { 
     message = document.createElement('div'); 
     message.className = 'error-message'; 
     message.id = 'error-for-' + id; 
     field.parentNode.insertBefore(message, field.nextSibling); 
    } 

    // Add ARIA role to the field 
    field.setAttribute('aria-describedby', 'error-for-' + id); 

    // Update error message 
    message.innerHTML = error; 

    // Show error message 
    message.style.display = 'block'; 
    message.style.visibility = 'visible'; 

} 

var removeError = function(field) { 
    // Remove the error message 

    // Remove error class to field 
    field.classList.remove('error'); 

    // Remove ARIA role from the field 
    field.removeAttribute('aria-describedby'); 

    // Get field id or name 
    var id = field.id || field.name; 
    if (!id) return; 

    // Check if an error message is in the DOM 
    var message = field.form.querySelector('.error-message#error-for-' + id + ''); 
    if (!message) return; 

    // If so, hide it 
    message.innerHTML = ''; 
    message.style.display = 'none'; 
    message.style.visibility = 'hidden'; 
}; 

//Listen to all blur events 
document.addEventListener('blur', function (event) { 
    // Only run if field is in a form to be validated by our custom script 
    if (!event.target.form.classList.contains('validate')) return; 

    // Validate field 
    var error = hasError(event.target); 

    // If there's an error, show it 
    if(error){ 
     showError(event.target, error); 
     return; 
    } 

    //Otherwise, remove any existing error msg 
    removeError(event.target); 
}, true); 

// Check all fields on submit 
document.addEventListener('submit', function (event) { 

    // Only run on forms flagged for validation 
    if (!event.target.classList.contains('validate')) return; 

    // Get all of the form elements 
    var fields = event.target.elements; 

    // Validate each field 
    // Store the first field with an error to a variable so we can bring it into focus later 
    var error, hasErrors; 
    for (var i = 0; i < fields.length; i++) { 
     error = hasError(fields[i]); 
     if (error) { 
      showError(fields[i], error); 
      if (!hasErrors) { 
       hasErrors = fields[i]; 
      } 
     } 
    } 

    // If there are errors, don't submit form and focus on first element with error 
    if (hasErrors) { 
     event.preventDefault(); 
     hasErrors.focus(); 
    } 
    // Call self invoking jQuery function to handle form submit by Ajax if validation passes 
    else { 
     (function($){ 
      var form = $('#cpapsupform'); 
      var formMessages = $('#cpap-form-messages'); 

      // Is this line below necessary if I've done this in the normal js above? 
      $(form).submit(function(event){ 
       event.preventDefault(); 
       // Serialize Form Data 
       var formData = $(form).serialize(); 
       //Submit the form via AJAX 
       $.ajax({ 
        type: 'POST', 
        url: $(form).attr('action'), 
        data: formData 
       }) 

       .done(function(response) { 
        // Make sure that the formMessages div has the 'success' class. 
        $(formMessages).removeClass('error'); 
        $(formMessages).addClass('success'); 

        // Set the message text. 
        $(formMessages).text(response); 

        // Clear the form. 
        $('#cpap_sup_name_first').val(''); 
        $('#cpap_sup_name_last').val(''); 
        $('#contact_name_first').val(''); 
        $('#contact_name_last').val(''); 
        $('#cpap_contact_email').val(''); 
        $('#cpap_contact_phone').val(''); 
        $('#cpap_patient_dob').val(''); 
        $('#cpap_patient_zip').val(''); 
       }) 

       .fail(function(data) { 
        // Make sure that the formMessages div has the 'error' class. 
        $(formMessages).removeClass('success'); 
        $(formMessages).addClass('error'); 

        // Set the message text. 
        if (data.responseText !== '') { 
         $(formMessages).text(data.responseText); 
        } else { 
         $(formMessages).text('An error occured and your message could not be sent.'); 
        } 
       }); 
      }); 
     })(jQuery); 
    } 
}, false); 

は、私が使用していますPHPのフォームクラスから抜粋フォームマークアップ（あります）：

<?php 
<div id="cpap-form-area"> 
    <div id="cpap-form-messages"></div> 
    <div class="cpap-form-greet"> 
     <p>Some text goes here.</p> 
    </div> 
    <form method="POST" action="" id="cpapsupform" class="validate" enctype="multipart/form-data" >    
     <fieldset> 
      <legend>Patient Name</legend> 
      <div class="p-firstname"> 
       <label for="cpap_sup_name_first">First Name:</label> 
       <input type="text" size="50" name="cpap_sup_name_first" id="cpap_sup_name_first" value="<?php echo $display['cpap_sup_name_first']; ?>" required /> 
      </div> 
      <div class="p-lastname"> 
       <label for="cpap_sup_name_last">Last Name:</label> 
       <input type="text" size="50" name="cpap_sup_name_last" id="cpap_sup_name_last" value="<?php echo $display['cpap_sup_name_last']; ?>" required /> 
      </div> 
     </fieldset> 
     <fieldset>   
      <legend>Point of Contact</legend> 
      <div class="samename"> 
       <div class="cpap_input_alt"> 
        <input id="samecheck" type="checkbox" name="samecheck" onchange="copyTxtVal(this.form);"> 
       </div> 
       <label for="samecheck">Use same as above</label> 
      </div> 
      <div class="c-firstname"> 
       <label for="contact_name_first">First Name:</label> 
       <input type="text" size="50" name="contact_name_first" id="contact_name_first" value="<?php echo $display['contact_name_first']; ?>" required /> 
      </div> 
      <div class="c-lastname"> 
       <label for="contact_name_last">Last Name:</label> 
       <input type="text" size="50" name="contact_name_last" id="contact_name_last" value="<?php echo $display['contact_name_last']; ?>" required /> 
      </div> 
     </fieldset> 
     <fieldset> 
      <legend>Contact Details</legend> 
      <div class="cpap-email-contact"> 
       <label for="cpap_contact_email">Email:</label> 
       <input type="email" name="cpap_contact_email" id="cpap_contact_email" value="<?php echo $display['cpap_contact_email']; ?>" title="The domain portion of the email after '@' is invalid." pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$" required /> 
      </div> 
      <div class="cpap-tel-contact"> 
       <label for="cpap_contact_phone">Phone:<br /><span class="tiny-txt">(10 digits; no spaces)</span></label> 
       <input type="text" maxlength="10" name="cpap_contact_phone" id="cpap_contact_phone" value="<?php echo $display['cpap_contact_phone']; ?>" pattern="\d{10}" required /> 
      </div> 
     </fieldset> 
     <fieldset> 
      <legend>Patient Date of Birth</legend> 
      <div class="cpap-dob"> 
       <label for="cpap_patient_dob">Birthdate: <br /><span class="tiny-txt">(MM/DD/YYYY)</span></label> 
       <input type="text" name="cpap_patient_dob" id="cpap_patient_dob" value="<?php echo $display['cpap_patient_dob']; ?>" title="Your date looks incorrect, or it doesn't match the required format." max-length="10" pattern="((0[1-9])|(1[0-2]))/(([0-2]\d)|([3][01]))/((19|20)\d{2})" required ></input> 
      </div> 
     </fieldset> 
     <fieldset> 
      <legend>Address Info</legend> 
      <div class="cpap-zip"> 
       <label for="cpap_patient_zip">Patient Zipcode:<br /><span class="tiny-txt">(first 5 digits only)</span></label> 
       <input type="text" maxlength="5" name="cpap_patient_zip" id="cpap_patient_zip" value="<?php echo $display['cpap_patient_zip']; ?>" required ></input> 
      </div> 
     </fieldset> 
     <button type="submit" id="cpapAjaxButton" name="cpapAjaxButton">Submit Request</button> 
     <p class="form-msg">All fields must be completed</p> 
     <div class="clearfix"></div> 
     <?php wp_nonce_field('submit_cpap_form','nonce_field_for_submit_cpap_form'); ?> 
    </form> 
</div> 

Answer 1

まず、あなたは右ここにあなたのelse支店の開設中括弧が欠落しているという点で、構文エラーを持っている：

// Call self invoking jQuery function to handle form submit by Ajax if validation passes 
else (function($){ 

それは次のようになります。

// Call self invoking jQuery function to handle form submit by Ajax if validation passes 
else { (function($){ 

そして、エラーのこれらの種類を回避するために、コードの良いインデントや書式は、長い道のりを行くので、本当に、これが最善の方法だろうそれを書く：

// Call self invoking jQuery function to handle form submit by Ajax if validation passes 
else { 
    (function($) { 

今、あなたの主なポイント。コードを使用する前にJQueryライブラリを参照している限り、必要なときにJQueryを使用するだけです。いくつかのページ初期化作業が必要な場合は、「はい」、「文書準備完了」関数をJQueryオブジェクトに渡す必要があります。しかし、それとは別に、必要なときにいつでもJQueryを活用することができます。elseブランチの内部呼び出し機能は冗長です。 - コード実行がそのブランチに入ると、JQueryを再度呼び出さずにそのまま使用します。 。 documentオブジェクトがsubmitイベントを持っていない、

document.addEventListener('submit', function (event) { 

しかし：

はまた、あなたが始めます。イベントリスナーは、送信する要素のformに設定する必要があります。

また、いくつかの不必要な変数がありますが、変数をJQueryオブジェクトと同じに設定した後、それらを通常のDOMオブジェクトと同じようにJQueryオブジェクトに再度渡します。

ここにあなたのクリーンアップコードがあります。どのような変更が加えられたのか、その理由について慎重にコメントを確認してください。また、hasErrorとshowErrorの機能とHTMLも提供していないので、これは答えでできる最善の方法です。

// The document object doesn't get submitted, the form does. 
 
// Also this sytax finds every form that has the "validate" class, 
 
// so there is no need to test for that in the callback function 
 
$("form.validate").on('submit', function (event) { 
 

 
    // Get all of the form elements 
 
    var fields = event.target.elements; 
 

 
    // Always initialize your variables. Set them to null if you don't know the value to use yet 
 
    // Also, the "error" and "hasError" variables are not needed. You'll see why in a couple of lines down. 
 
    var hasErrors = null; 
 
    
 
    for (var i = 0; i < fields.length; i++) { 
 
    
 
    // I'm assuming you have a working "hasError" function that returns a boolean 
 
    // So, just take that return value and make that the basis for the if condition -- no 
 
    // need to store it just to test it on the next line. 
 
    if (hasError(fields[i])) { 
 
    
 
     // I'm assuming you have a working "showError" function. If we've entered into this 
 
     // branch of the code, we know that "hasError" returned true, so we can just pass that 
 
     // directly into the "showError" function instead of the "error" variable that we've 
 
     // now gotten rid of. 
 
     showError(fields[i], true); 
 
     
 
     // No need to test here. There is an error. 
 
     hasErrors = fields[i]; 
 
    } 
 
    } 
 

 
    // If there are errors, don't submit form and focus on first element with error 
 
    if (hasErrors) { 
 
    event.preventDefault(); 
 
    hasErrors.focus(); 
 
    } else { 
 
    
 
    // You don't need a self-invoking function here. Just write the code that should execute 
 
    
 
    // It is a common convention to name variables that store references to JQuery objects 
 
    // with a leading $ to distinguish them as such and not regular DOM objects 
 
    var $form = $('#cpapsupform'); 
 
    var $formMessages = $('#cpap-form-messages'); 
 

 
    // Submit the form via AJAX 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: $form.attr('action'), // $form is already a JQuery object, don't pass it to JQuery again 
 
     data: $form.serialize() // <-- You had semi-colon here, which you shouldn't have 
 
    }).done(function(response) { 
 
     // $formMessages is already a JQuery object, don't pass it to JQuery again 
 
     $formMessages.removeClass('error'); 
 
     $formMessages.addClass('success'); 
 

 
     // Set the message text. 
 
     $formMessages.text(response); 
 

 
     // Just use the DOM form.reset() method here instead of resetting each form field 
 
     $form[0].reset(); 
 
     
 
    }).fail(function(data) { 
 
     // Make sure that the formMessages div has the 'error' class. 
 
     $formMessages.removeClass('success'); 
 
     $formMessages.addClass('error'); 
 

 
     // Set the message text. 
 
     if (data.responseText !== '') { 
 
     $formMessages.text(data.responseText); 
 
     } else { 
 
     $formMessages.text('An error occured and your message could not be sent.'); 
 
     } 
 
     
 
    }); 
 
    
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="GET" class="validate"> 
 
    <input type="text" id="name"> 
 
    
 
    <input type="submit"> 
 
</form> 
 

 
<form action="#" method="GET"> 
 
    <input type="text" id="name"> 
 
    
 
    <input type="submit"> 
 
</form>

Answer 2

jQueryはJavascriptなので、一緒に使用することができます。私はあなたの問題はあなたが適切にあなたのelse文をブラケティングではないにあるかもしれないと思う：

else { (function($){ // was missing brace after 'else' 
    var form = $('#cpapsupform'); 
    var formMessages = $('#cpap-form-messages'); 

     .... 

    })(jQuery); 
}//closing else brace