報名表格未提交

Question

此表格用於工作。直到我對電子郵件驗證功能進行了一些調整。有什麼我沒有看到需要完成的嗎？另外，我該如何改進這種形式？

我改變的是哪個驗證首先激發。一旦基本驗證完成並且電子郵件不是空的。我希望在進行提交之前驗證電子郵件。

$(document).ready(function() { 

    //add default text on certain fields 
    $("#phone").on({ 
     focus: function() { 
      if($(this).val().length === 0) { 
       $(this).val('+'); } 
      }, 
     blur: function() { 
      if($(this).val() === '+') { 
       $(this).val(''); } 
      } 
    }); 

    $("#twitter").on({ 
     focus: function() { 
      if($(this).val().length === 0) { 
       $(this).val('@'); } 
      }, 
     blur: function() { 
      if($(this).val() === '@') { 
       $(this).val(''); } 
      } 
    }); 

    $("#facebook").on({ 
     focus: function() { 
      if($(this).val().length === 0) { 
       $(this).val('facebook.com/'); } 
      }, 
     blur: function() { 
      if($(this).val() === 'facebook.com/') { 
       $(this).val(''); } 
      } 
    }); 

    $("#portfolio").on({ 
     focus: function() { 
      if($(this).val().length === 0) { 
       $(this).val('www.'); } 
      }, 
     blur: function() { 
      if($(this).val() === 'www.') { 
       $(this).val(''); } 
      } 
    }); 

    //when submit is clicked 
    $('#contactform').on('submit', function() { 
     var form = $(this); 
     var inputs = $('input[type="text"]'); 
     var workshop = $('#selectworkshop'); 
     var firstname = $('#firstname'); 
     var lastname = $('#lastname'); 
     var email = $('#email'); 
     var phone = $('#phone'); 
     var companyorschool = $('#companyorschool'); 
     var portfolio = $('#portfolio'); 
     var twitter = $('#twitter'); 
     var facebook = $('#facebook'); 
     var honeypot = $('#honeypot'); 
     var invalid = false; 

     //basic validation on required fields 
     $('.required').each(function() { 
      if ($(this).val().length === 0) { 
       $(this).addClass('highlight'); 
        if($('#form-alert').is(':visible')) { 
         $('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'}); 
        } else { 
         $('#form-alert').html('Please fill in the required information.').slideDown('slow'); 
        } 
       invalid = true; 
      } else { 
       $(this).removeClass('highlight'); 
       invalid = false; 
      } 
     }); 

     if (invalid === true) { 
      return false; 
     } 

     //basic email validation 
     if(validateEmail(email) === false) { 
      $(email).addClass('highlight'); 
       if($('#form-alert').is(':visible')) { 
        $('#form-alert').html('Please enter a valid email address.'); 
        $('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'}); 
       } else { 
        $('#form-alert').html('Please enter a valid email address.').slideDown('slow'); 
        $('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'}); 
       } 
      invalid = true; 
     } else { 
      invalid = false; 
     } 

     if (invalid === true) { 
      return false; 
     } 

     //email validation function using regex 
     function validateEmail(email) { 
      var emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$/; 
      if(!emailReg.test(email)) { 
      return false; 
      } else { 
      return true; 
      } 
     } 

     //show the loading animation on button 
     $('#submit').val(' ').addClass('loading').attr('disabled', 'true'); 

     //start the ajax 
     $.ajax({ 
      url: '/registration.php', 
      type: 'POST', 
      data: form.serialize(), 
      cache: false, 
      beforeSubmit: function() { 
       if($('#form-alert').is(':visible')) { 
        $('form-alert').slideUp('fast'); 
       } 
      }, 
      success: function(responseText, statusText, xhr) { 
       console.log("Worked!"); 
       $('#form-success').html(responseText).slideDown('slow'); 
      }, 
      complete: function() { 
       inputs.attr('disabled', 'true'); 
       $('#submit').removeClass('loading').val('REGISTRATION COMPLETE'); 
      } 
     }); 
     //cancel the submit button default behaviours 
     return false; 
    }); 
}); 

Answer 1

我做了一些更改，使其工作。在條件下提交表單使得它看起來有很多不同。有改進的餘地。我會在某個時候做到這一點。

$(document).ready(function() { 

    //add default text on certain fields (removed to simplify answer) 

    //when submit is clicked 
    $('#submit').on('click', function() { 
     var form = $('#contactform'); 
     var inputs = $('input[type="text"]'); 
     var workshop = $('#selectworkshop'); 
     var firstname = $('#firstname').val(); 
     var lastname = $('#lastname').val(); 
     var email = $('#email').val(); 
     var phone = $('#phone').val(); 
     var companyorschool = $('#companyorschool').val(); 
     var portfolio = $('#portfolio').val(); 
     var twitter = $('#twitter').val(); 
     var facebook = $('#facebook').val(); 
     var honeypot = $('#honeypot').val(); 
     var required_invalid = false; 
     var email_invalid = false; 
     var email_validation = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$/; 

     $('.required').removeClass('highlight'); 

     //basic validation on required fields 
     $('.required').each(function() { 
      if ($(this).val().length === 0) { 
       $(this).addClass('highlight'); 
        if($('#form-alert').is(':visible')) { 
         $('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'}); 
        } else { 
         $('#form-alert').html('Please fill in the required information.').slideDown('slow'); 
        } 
       required_invalid = true; 
      } 
     }); 

     if (required_invalid === true) { 
      return false; 
     } 

     //basic email validation 
     if(!email_validation.test(email)) { 
      $(email).addClass('highlight'); 
       if($('#form-alert').is(':visible')) { 
        $('#form-alert').html('Please enter a valid email address.'); 
        $('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'}); 
       } else { 
        $('#form-alert').html('Please enter a valid email address.').slideDown('slow'); 
        $('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'}); 
       } 
      email_invalid = true; 
     } 

     if (email_invalid === true) { 
      return false; 
     } 

     if (required_invalid === false && email_invalid === false) { 

      //show the loading animation on button 
      $('#submit').val(' ').addClass('loading').attr('disabled', 'true'); 

      //start the ajax 
      $.ajax({ 
       url: '/registration.php', 
       type: 'POST', 
       data: form.serialize(), 
       cache: false, 
       success: function(responseText, statusText, xhr) { 
        console.log("Worked!"); 
        $('form-alert').slideUp(); 
        $('#form-success').html(responseText).slideDown('slow'); 
       }, 
       complete: function() { 
        inputs.attr('disabled', 'true'); 
        $('#submit').removeClass('loading').val('REGISTRATION COMPLETE'); 
       } 
      }); 
     } else { 
      //cancel the submit button default behaviours 
      return false; 
     } 
    }); 
});