JAVASCRIPT

check if input is valid

//Get the input element from the DOM 
const inputElement = document.querySelector(".input")
//Get the object of ValidityState and log it to our console
console.log(inputElement.validity)
//Note that in the ValidityState Object we have a row called "valid" with boolean value
//In this way we can check if our input is valid or not AKA "true" || "false"
inputElement.addEventListener("input", function(){
  if(inputElement.validity.valid){
    consloe.log("Valid input")
  }else{
     consloe.log("Invalid input")
  }
})

check if input is valid js

//there are two ways to check the validity.

    inputElement.checkValidity() //returns true or false
    inputElement.validity //returns the validity-state object. 
    inputElement.validity.valid //returns true/false

how to check if input is valid javascript

// input if empty in bootstrap but can be used even without bootstrap
// In your html file
// take note id="frm_subscription" and required class be in all of your required inputs
  <form id="frm_subscription">
    <div class="form-group">
      <div class="row">
        <div class="col-md-6 col-xs-12">
          <input type="text" class="form-control form-input border required" name="business_name" placeholder="Business Name *" required="true">
        </div>
		<div class="col-md-6 col-xs-12">
          <input type="text" class="form-control form-input" name="business_address" placeholder="Business Address">
        </div>
	</div>
	</div>
</form>

// In your js
    function validate(formId) {
        let valid = true;
        $.each(formId, function(i, field) {
            $("[name='" + field.name + "']").prev('.text-danger').remove();

            if (field.value == "" && $("[name='" + field.name + "']").prop('required')) {
                valid = false;
              	// you can customise your error styles based on your theme
                // Below couple of lines are example used in bootstrap
                $("[name='" + field.name + "']").css({ "border": "1px solid #ff000087" });
                $("[name='" + field.name + "']").before('<span class="text-danger">This field is required *</span>');
            }
        });
        return valid;
    }

	// usage : if false dont continue
 	if (!validate($("#frm_subscription").serializeArray())) { return; }