表單驗證JS - 驗證名字輸入字段

-3

任何人都可以足以向我展示如何驗證此輸入字段？提交按鈕被禁用，直到選中驗證。非常感謝提前，任何幫助讓我開始非常感謝。這裏是我的代碼：表單驗證JS - 驗證名字輸入字段

<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>

來源

2017-02-22 user3767554

除非你問這個插件，請不要使用jQuery驗證標籤。編輯。 – Sparky

這取決於你在尋找什麼樣的驗證了。由於它是名稱字段，因此我會假設您要確保它不是空白並且只包含字母。

爲了實現這一目標使用jQuery你可以使用這樣的事情：

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

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

來源

2017-02-22 13:45:08

這樣的事情。我不知道這是否是你可以看一下在該領域的變化/ KEYUP然後拿到價值，以驗證它不爲0，然後添加/刪除disabled屬性爲按鈕的最好方式

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

來源

2017-02-22 13:49:44 tino

。

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

Codepin

來源

2017-02-22 13:59:13

表單驗證JS - 驗證名字輸入字段

回答

相關問題