Форма проверки 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

Это зависит от того, какого рода проверки вы ищете. Поскольку это поле имени, я предполагаю, что вы хотите убедиться, что оно не пустое и содержит только буквы.

Для достижения этой цели с помощью JQuery вы можете использовать что-то вроде этого:

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

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

Answer 2

Что-то вроде этого. Я не знаю, если это лучший способ

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

Вы можете посмотреть на изменение/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