Enable Submit Button After Correct Validation including regExp

We can find forms on almost every website. In this blog, we will see how we can validate user inputs with the help of JavaScript. Form validation is the process of verifying that a form has been filled in accurately before it is submitted.
Here, we’ll see if all the fields are of correct values, the submit button will get enabled. Here, I included regExp in the Email input field. A regular expression (regEx) is a structure that can be used to match character combinations in text strings, so they are appropriate for form validation. Once validation of all data is passed then enable the submit button for the user and they submit the form. But, if there is a validation error, such as anyone left blank or wrong input in the required field, the submit button is disabled. Here I show some images that help the readers to understand.

Form Validation on Submit Form

When I gave wrong input in Email field or left blank the Name field, the submit button is disabled.

Let’s see the following codes…..

HTML

<form class="form">
     <div class="row mb-26">
        <div class="col-md-2 col-sm-2 col-xs-12 text-right"><label for="input-name">Name</label></div>
        <div class="col-md-10 col-sm-10 col-xs-12">
            <input type="text" class="form-input text" id="input-name" name="fname" oninput="validateForm()" >
        </div>
     </div>
     <div class="row mb-26">
        <div class="col-md-2 col-sm-2 col-xs-12 text-right"><label for="input-mail" >Email</label></div>
         <div class="col-md-10 col-sm-10 col-xs-12">
             <input type="text" name="email" class="form-input text" id="input-email" oninput="validateForm()">
         </div>
     </div> 
     <div class="row mb-26">
        <div class="col-md-2 col-sm-2 col-xs-12 text-right"><label for="input-message">Your Message</label>
        </div>
        <div class="col-md-10 col-sm-10 col-xs-12">
             <textarea name="message" cols="36" rows="5" class="form-input" id="input-message" oninput="validateForm()"></textarea>
        </div>
     </div> 
     <div class="row mb-26">
        <div class="col-md-7 col-sm-12 col-xs-12">
           <button type="submit" class="submit-button" disabled>Submit</button>
        </div>
     </div> 
</form>

CSS

/* form-validation */

.mb-26{
   margin-bottom: 26px;
}
.submit-button{
    padding: 14px 44px;
    color: #fdfdfd;   
    display: block;
    margin: 0 auto;
}
.submit-button:disabled{
   background: #c5dce7;
}
.form-input.text{
     width: 34%;
     height: 28px;
  }
}

JavaScript

var inputName = document.getElementById('input-name');
var inputEmail = document.getElementById('input-email');
var inputMessage = document.getElementById('input-message');
var button = document.querySelector('.submit-button');
var regEx = /\S+@\S+\.\S+/; // string, white-space, @ , white-space, dot, white-space, value, string //
var form = document.querySelector('.form');

function validateForm(){
    if (inputName.value !== "" && regEx.test(inputEmail.value) && inputMessage.value !== ""){
       button.style.backgroundColor = '4b8aa7';
       button.disabled = false;
    } else {
       button.style.backgroundColor = '#c5dce7';
       button.disabled = true;
    }
}
form.addEventListener('submit', function(event){
     event.preventDefault();
     console.log("submitted")

})

This is one of the form validation types. Later, I’ll show different types of form validation using different programming languages.

Munmun Das Subscriber

Web Designer , Openweb Solutions

Front-end Developer and Technology Enthusiast at Openweb Solutions

munmun@openwebsolutions.in