form validation JS - validate first name input field

Question

Can anyone be kind enough to show me how I can validate this input field? Submit button is disabled until validation is checked. Many thanks in advance, any help to get me started is much appreciated. Here's my code:

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

Please do not use the jQuery Validate tag unless you're asking about this plugin. Edited. — Sparky, Feb 22 '17 at 16:00

score 0 · Answer 1 · answered Feb 22 '17 at 13:45

It depends what sort of validation you're looking for. Since it's a name field I will assume you want to ensure it's not blank and only contains letters.

To achieve that using jQuery you can use something like this:

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

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

score 0 · Answer 2 · answered Feb 22 '17 at 13:49

Something like this. I don't know if it's the best way

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

score 0 · Answer 3 · answered Feb 22 '17 at 13:59

You can look for a change/keyup in the field and then get the value to verify it is not 0, then add/remove the disabled attribute for buttons.

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

Codepin

form validation JS - validate first name input field

3 Answers3