Materialize 및 jQuery를 사용한 전자 메일 유효성 검사

Question

전자 메일 유효성을 검사하는 Materialize를 사용하여 양식을 만들려고합니다. 제출 버튼을 사용 중지 한 상태로 시작합니다. 전자 메일이 채워지고 유효성이 검사되면 제출 단추가 사용 중지되는 것이 이상적이며 사용자가 다음 단추를 클릭 할 수 있습니다. 여기 내 HTML은 다음과 같습니다

여기

<form id="survey"> 

     <div class="input-group"> 
      <p class="input-header">Enter Your Email</p> 
      <div class="input-block input-field"> 
     <input id="email" type="text" name= "email" class="validate" required="" aria-required="true"> 
     <label for="email">Email Address</label> 
     </div> 
     <br></br> 

     <a class="waves-light btn red lighten-2 disabled" id="submit">Submit 
     <i class="material-icons right">send</i> 
     </a> 
     <br></br> 
     <br></br> 
     <br></br> 

</form> 

는 자바 스크립트/jQuery를 수 있습니다 :

$(document).ready(function(){ 
    $('.parallax').parallax(); 

$('body').on('click', '#submit', function() { 
let decision = confirm('Are you sure you would like to submit your survey?'); 
if (decision) { 
    $.post('insert.php', $('#survey').serialize()); 
window.location.href = 'thankyou.php'; 
} 
}); 

$('body').on('click', 'input', function() { 
checkValidity($(this)); 
}); 
$('body').on('focusout', 'input', function() { 
checkValidity($(this)); 
}); 

function checkValidity (current) { 
let isValid = true; 
if (!current.val()) { 
    isValid = false; 
} else { 
    isValid = iteratatingForm(current); 
} 
const submit = $('#submit'); 
if (isValid) { 
    submit.removeClass('disabled'); 
} else { 
    if (!submit.hasClass('disabled')) { 
    submit.addClass('disabled'); 
    } 
} 
} 

function iteratatingForm (current) { 
if (!document.forms['survey']['email'].value) return false; 
return true; 
}}); 

날 내가 잘못 알려주세요! 감사!

Answer 1

입력에 email 유형을 사용하고 submit 버튼을 사용하여 유효성 검사 입력을 트리거 할 수 있습니다. 전자 메일이 정규식과 함께 유효한지 확인하는 함수를 추가했습니다. (여기 찾았 How to validate email address in JavaScript?를) 당신 때문에 jQuery를 검증 플러그인 to jQuery Validation Plugin

$(document).ready(function(){ 
 
    
 
    $('#survey input').on('keyup', function(){ 
 
    var validator = $("#survey").validate(); 
 
    if (validator.form() && validateEmail($('#email').val())) { 
 
    $('#submitButton').prop('disabled', false); 
 
    $('#submitButton').removeClass('disabled'); 
 
    } 
 
    else{ 
 
     $('#submitButton').prop('disabled', true); 
 
     $('#submitButton').addClass('disabled'); 
 
     } 
 
    } ); 
 

 
    function validateEmail(email) { 
 
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
 
    return re.test(email.toLowerCase()); 
 
} 
 
    /* 
 
    Confirmation Window 
 
    */ 
 
    $('body').on('click', '#submit', function() { 
 
    let decision = confirm('Are you sure you would like to submit your survey?'); 
 
    if (decision) { 
 
     $.post('insert.php', $('#survey').serialize()); 
 
    window.location.href = 'thankyou.php'; 
 
    } 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/> 
 
<script src=" 
 
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<form id="survey"> 
 

 
\t \t \t <div class="input-group"> 
 
\t \t \t \t <p class="input-header">Enter Your Email</p> 
 
\t \t \t \t <div class="input-block input-field"> 
 
\t   <input id="email" type="email" name= "email" class="validate" required="true" aria-required="true"> 
 
\t   <label for="email">Email Address</label> 
 
\t  </div> 
 

 
    <button type="submit" form="survey" value="Submit" class="waves-light btn red lighten-2 disabled" disabled='disabled' id="submitButton">Submit</button> 
 
\t \t </form>

StackOverflow의 버그를 니펫을 추가해야하지만, CodePen에