フォーム - ユーザーが間違った電話と電子メールで送信することを許可しない

Question

現在、フォームの入力フィールドを入力するユーザーは、電子メールと電話フィールドが無効であることを示す場合でも送信ボタンをクリックできます。現在、私のJavaScriptは設定されているので、送信ボタンは無効にならず、入力フィールドにテキストがあるかぎり、「送信」をクリックすることができます。正しいフィールドと有効な情報が入力フィールドに入力されている場合にのみ、ユーザーが送信をクリックできるようにする方法はありますか？誰かが助けることができれば、私は本当にそれを感謝します。

JSFiddle

姓 姓 メール 入力してください有効なメールアドレス 電話 有効な電話番号を入力してください都市 州/地方 会社 コメント --NONE-- Visiant テッセレーション
--NONE-- 内部 見本市 ウェブサイト ダイレクトマーケティング ソーシャルメディア その他

body { 
    color: #fff; 
    background-color: #f78e2a; 
    text-align: center; 
} 

form { 
    color: #fff; 
    background-color: #f78e2a; 
    text-align: center; 
    font-family: Lato; 
} 

* { 
    box-sizing: border-box; 
} 

.form-title { 
    font-size: 38px; 
    color: #fff; 
    font-family: "Lato"; 
    letter-spacing: 70px; 
} 

input[type="tel"] { 
    width: 100%; 
    height: 85%; 
    padding: 10px; 
    background-color: #f9a558; 
    border: 1px solid #fff; 
} 
input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    background-color: #f9a558; 
    border: 1px solid #fff; 
} 


input[type="text"]:focus { 
    background-color: #fff; 
} 

input[type="text"]:visited { 
    background-color: #fff; 
} 

input[type="tel"]:focus { 
    background-color: #fff; 
} 

input[type="tel"]:visited { 
    background-color: #fff; 
} 

.container { 
    display: flex; 
    flex-direction: column; 
    padding: 5px 0; 
    margin-left: 10%; 
    margin-right: 10%; 
} 

textarea { 
    width: 100%; 
    background-color: #f9a558; 
    border: 1px solid #fff; 
} 

textarea:focus { 
    background-color: #fff; 
} 

#co { 
    flex-basis: 100%; 
    max-width: 100%; 
} 

label:nth-last-child(-n+2) { 
    flex-basis: 100%; 
    max-width: 100%; 
} 

select, 
label { 
    height: 50px; 
    width: 48%; 
    margin: 2% 1%; 
    text-align: left; 
    font-family: "Lato"; 
} 

#sub { 
    border-radius: 6px; 
    width: 120px; 
    height: 35px; 
    text-transform: uppercase; 
    display: block; 
    margin-top: 10px; 
} 

button { 
    margin-top: 10px; 
    background-color: #B9B9B9; 
    color: #959595; 
    border-radius: 6px; 
    width: 120px; 
    height: 35px; 
    margin-left: 1%; 
    display: block; 
} 

button:focus { 
    background-color: #fff; 
    color: #f78e2a; 
} 

@media (max-width: 426px) { 
    label { 
    width: 98%; 
    } 
} 

@media (min-width: 426px) { 
    .container { 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-self: flex-start; 
    } 
} 

label { 
    position: relative; 
} 

.fa { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    transform: translate(-50%, -5%); 
    opacity: 0; 
    transition: opacity .5s, color .5s; 
} 

[data-valid] .fa { 
    opacity: 1; 
    color: green; 
} 

[data-valid="valid"] .fa { 
    color: green; 
} 

[data-valid="error"] .fa { 
    color: red; 
} 

.error { 
    display: none; 
    color: red; 
    font-size: .7em; 
    position: absolute; 
    left: 10px; 
    top: 0; 
    transform: translateY(150%); 
} 

[data-valid="error"] .error { 
    display: block; 
} 

input#sub:not([disabled]){ 
    background-color: #fff; 
    color: #F68D2E;; 
} 

function phoneNumber(phone) { 
    var phoneno = /^\d{9,11}$/; 

    console.log("PHONE: "+phoneno.test(phone)); 
    return phoneno.test(phone); 
} 

$('input[type="tel"]').on('keyup', function() { 
    var $label = $(this).closest('label'); 
    if ($(this).val().trim() != '') { 
    if ($(this).is('#phone')) { 
     if (phoneNumber($(this).val())) { 
     $label.attr('data-valid', 'valid'); 
     $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle"); 
     } else { 
     $label.attr('data-valid', 'error'); 
     console.log("this works"); 
     $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o"); 
     } 
    } else { 
     $label.attr('data-valid', 'valid'); 
     console.log("this works") 
    } 
    } else { 
    $label.removeAttr('data-valid'); 
    console.log("this works") 

    } 
}); 


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,}))$/; 

    console.log("email: "+re.test(email)); 
    return re.test(email); 
} 

$('input[type="text"]').on('keyup', function() { 
    var $label = $(this).closest('label'); 
    if ($(this).val().trim() != '') { 
    if ($(this).is('#email')) { 
     if (validateEmail($(this).val())) { 
     $label.attr('data-valid', 'valid'); 
     $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle"); 

     } else { 
     $label.attr('data-valid', 'error'); 
     console.log("this works 1") 
     $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o"); 
     } 
    } else { 
     $label.attr('data-valid', 'valid'); 
     console.log("this works 2"); 
    } 
    } else { 
    $label.removeAttr('data-valid'); 
    console.log("this works 3"); 
    } 
}); 


test = function() { 
    if ($("#first_name").val() 
     && $("#last_name").val() 
     && $("#email").val() 
     && $("#phone").val() 
     && $("#city").val() 
     && $("#state").val() 
     && $("#company").val() 
     && $("#comments").val()) { 

    $("#sub").removeAttr("disabled"); 
    } 
} 

Answer 1

test = function() { 
    if ($("#first_name").val() 
     && $("#last_name").val() 
     && (validateEmail($("#email").val())) 
     && (phoneNumber($("#phone").val())) 
     && $("#phone").val() 
     && $("#city").val() 
     && $("#state").val() 
     && $("#company").val() 
     && $("#comments").val()) { 

    $("#sub").removeAttr("disabled") && $("#sub2").removeAttr("disabled"); 
    } 
} 

Answer 2

ええ2つのオプション（意見のすべてを提供）のカスタムは、あなたの検証スクリプトを作成し、他の利用jqueryのvalidaterプラグイン

がありますので、ための基本的な考え方あなた自身のスクリプトを作成することは、入力が変更されるか、何かが入力されるたびに検証関数をチェックすることです。

$('input[type=text], input[type=phone],input[type=email]').on('change onkeypress ',function(){ 
YourValidationFunction(); 
}) 

または

だけ

https://jqueryvalidation.org/documentation/