フォームの検証JS - ファーストネーム入力フィールドの有効性確認

Question

この入力フィールドの検証方法を教えていただけますか？確認ボタンがチェックされるまで、[送信]ボタンは無効です。事前に多くの感謝、私を始めるための任意の助けは非常に感謝しています。 は、ここに私のコードです：

<style> 
    .textinput { 

     border: 1px solid #000; 
     border-radius: 0; 
     box-sizing: border-box; 
     color: #6c6c6c; 
     height: auto; 
     margin: 0px auto 15px auto; 
     padding: 4px 0 5px 10px; 
     width: 100%; 
     font-family: Apercuregular,sans-serif; 
     font-weight: normal; 
     letter-spacing: .02em; 
     font-size: 16px; 
     display: block; 
     width: 300px; 
} 

.form-button{ 
    background-color: #000; 
    color: #fff; 
    display: block; 
    letter-spacing: .02em; 
    font-family: Apercuregular,sans-serif; 
    font-size: 13px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding: 1.2em 2em 1.2em 2em; 
    width: 275px; 
    margin: 25px auto 25px auto; 
    border: 1px solid #000; 
    outline: none; 
    } 
.form-button[disabled], 
.form-button[disabled]:hover { 
    background-color: #d1d3d4; 
    color: #fff; 
    border: 0 none; 
} 

.form-button:focus, 
.form-button:hover{ 
    background:#f3f3f3; 
    color:#000; 
    border: 1px solid #f3f3f3; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -webkit-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

.fieldLabel { 
    display: block; 
    font-size: 13px; 
    font-family: Apercuregular,sans-serif; 
    letter-spacing: .02em; 
    text-align: left; 
    width: 100%; 
    line-height: 17px; 
} 

input[type="checkbox"]{ 
display: none; 
} 


input[type="email"] { 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
} 

</style> 

      <div id="container_COLUMN1"> 
       <input type="text" name="First Name" id="control_COLUMN1" label="First Name" class="textinput mandatory" placeholder="First name*" required labeltext="First name*" maxlength="50" mandatory="true"> 
      </div> 




      <div> 
       <button type="submit" class="defaultText form-button" id="submitBtn" value="Enter Now">Enter Now</button> 
      </div> 

Answer 1

それはあなたが探している検証の種類を依存します。名前欄なので、空白ではなく、文字のみが含まれていることを確認したいと思います。このような

var reg = /^[a-z]+$/i; 
var name = $('#control_COLUMN1').val(); 

if(name != '' && reg.test(name)) { 
    //name is valid 
} else { 
    //name is invalid 
} 

Answer 2

何か：jQueryのを使用すると、あなたはこのようなものを使用することができることを実現するために

。私はそれが最善の方法

// get the text 
var inputText =document.getElementById("control_COLUMN1").value; 

// do controls 

if(controls){ 
    document.getElementById("submitBtn").hidden=false; 
}else{ 
    document.getElementById("submitBtn").hidden=true; 
} 

Answer 3

だ場合は、その後、ボタンのdisabled属性を追加/削除、フィールドに変更/ keyUpイベントを探し、それが0でないであることを確認する値を得ることができるかわかりません。あなたがこのプラグインについて尋ねている場合を除き

$("#control_COLUMN1").keyup(function(event) { 
var fieldValue = event.target.value; 
if (fieldValue == 0) { 
    $("#submitBtn").attr("disabled", "disabled"); 
} else { 
    $("#submitBtn").removeAttr("disabled", "disabled"); 
}  
}); 

Codepin