등록 양식이 제출되지 않았습니다.

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; 
     } 
    }); 
});