We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 44437
    • 74 Posts
    Hey, I trying to understand how to build an Ajax Formit Form and how it works. Here is my illustration and what I'm trying to do:

    1) I have a resource with the Formit Snippet and form html

    [[!FormIt?
       &hooks=`spam,email`
       &customValidators=`PhoneValidate`
       &emailTpl=`MyFormChunk`
       &emailSubject=`New Message from No0b`
       &emailTo=`[email protected]`
       &emailFrom=`[email protected]`
       &validate=`title:required,
          yourname:required,
          email:email:required,
          address:required,
          phone:PhoneValidate`
       &successMessage=`Thank you for your request. We will follow up with you within 24 hours.`	  
    ]]
    
    <form action="[[~[[*id]]]]" method="post" class="ajax_form">
    
    <label class="label_title">Title:[[!+fi.error.title]]</label>
    <input type="radio" name="title[]" value="Mr" [[!+fi.title:FormItIsChecked=`Mr`]] id="mr"> 
    
    <label for="mr">Mr.</label>
    <input type="radio" name="title[]" value="Mrs" [[!+fi.title:FormItIsChecked=`Mrs`]]  id="mrs"> 
    
    <label for="mrs">Mrs.</label>
    <input type="radio" name="title[]" value="Other" [[!+fi.title:FormItIsChecked=`Other`]] id="other"> <label for="other">Other</label>
    
    <label class="label_title" id="popup_yourname">Full Name:[[!+fi.error.yourname]]</label>
    <input type="text" name="yourname" id="yourname" class="inputField required" value="[[+fi.yourname]]">
    
    <label class="label_title" id="popup_email">Email Address:[[!+fi.error.email]]</label>
    <input type="text" name="email" id="email" class="inputField required" value="[[+fi.email]]">
    
    <label class="label_title" id="popup_phone">Telephone #:[[!+fi.error.phone]]</label>
    <input type="text" name="phone" id="phone" class="inputField required" value="[[+fi.phone]]">
    
     <label class="label_title" id="popup_address">Address:[[!+fi.error.address]]</label>
     <textarea rows="4" cols="5" name="address" id="address" class="textareaField required">[[!+fi.address]]</textarea>
    
    [[!+formit.recaptcha_html]]
    [[!+fi.error.recaptcha]]
    
    <input type="submit" value="SEND MESSAGE" class="ajax_submit" >
    
    </form>
    
    


    2) I have a .js to run validation on the form and submit the form to another resource

    jQuery(document).ready(function(){
        ajax_form();
    });
    
    function ajax_form(){
    
    var error;
    var request;
    
    $(".ajax_submit").click(function() {
        // validate and process form here
    
        // abort any pending request
        if (request) {
            request.abort();
        }
        
        var $form = $(this);
        var $inputs = $form.find("input");
        error = false;
    
        jQuery(".test_drive_ajax_form input, .test_drive_ajax_form textarea, .test_drive_ajax_form radio").each(function(i)
            {
               var surrounding_element = jQuery(this);
               var value               = jQuery(this).attr("value");
               var check_for           = jQuery(this).attr("id");
               var required 	   = jQuery(this).hasClass("required"); 
    
            });// END OF FUNCTION
    
            //ONLY ONE EXAMPLE OF VALIDATION CHECK 
    
            if(check_for == "yourname"){
    
               surrounding_element.removeClass("error valid");
               baseclases = surrounding_element.attr("class");
    
               if(value == "" || value == "Name" || value == "name"){
                  surrounding_element.attr("class",baseclases).addClass("error");  
                  document.getElementById('popup_yourname').innerHTML = 'Full Name: <span class="error">Required</span>';
                  error = true;
                    }
               else{
                    surrounding_element.attr("class",baseclases).addClass("valid");
                    document.getElementById('popup_yourname').innerHTML = 'Full Name:';
                    yourname = value;
                    }
                }
    
                //ADD REMAINING VALIDATION CHECKS HERE
    
                 if (error == false)
                    {
                      //Serialize Form
                      var serializedData = $('form.ajax_form').serialize();
    
                      //Submit Form to another resource with same Formit Snippet
                      $.post('http://www.randomsite.com/index.php?id=50', serializedData, function(data){
                      try {
                           var jsd = $.parseJSON(data);
                          } catch (e) {
                            //There is an error
                            alert('You have an error');
                            return false;
                            }
                      //IF NO ERRORS, THE FORM WAS SUCCESSFULLY SUBMITTED
                      alert('success');
                      
                      });// END OF .post
                     
                    }// END OF "if error"
      
                 return false; 
      });
    }
    


    3) I have an empty resource (id = 50) with below Formit Snippet

    [[!FormIt?
       &hooks=`spam,email`
       &customValidators=`PhoneValidate`
       &emailTpl=`MyFormChunk`
       &emailSubject=`New Message from No0b`
       &emailTo=`[email protected]`
       &emailFrom=`[email protected]`
       &validate=`title:required,
          yourname:required,
          email:email:required,
          address:required,
          phone:PhoneValidate`
       &successMessage=`Thank you for your request. We will follow up with you within 24 hours.`	  
    ]]
    
      • 44437
      • 74 Posts
      Here is my question

      When I run this code from the .js file

       $.post('http://www.randomsite.com/index.php?id=50', serializedData, function(data){
         try {
               var jsd = $.parseJSON(data);
               } catch (e) {
               //There is an error
               alert('You have an error');
               return false;
               }
                        
               //IF NO ERRORS, THE FORM WAS SUCCESSFULLY SUBMITTED
               alert('success');
      });// END OF .post                  
      


      and the form is submitted to the empty resource 50 with Formit snippet, will it run the server side validation listed in Formit?

      &validate=`title:required,
                       yourname:required,
                       email:email:required,
                       address:required,
                       phone:PhoneValidate`


      And how to return the error messages from the Formit call?