Disable Disable button and enable it during verification in Zurb Foundation

Question

I am familiar with the database a bit, I was wondering how I can disable this button, and as the user enters it, it will be checked and change the button to enable for sending.

Form Example:

<form data-abide> <div class="name-field"> <label>Your name <small>required</small> <input type="text" required pattern="[a-zA-Z]+"> </label> <small class="error">Name is required and must be a string.</small> </div> <div class="email-field"> <label>Email <small>required</small> <input type="email" required> </label> <small class="error">An email address is required.</small> </div> <input id="contactsubmit" class="button" type="submit" value="SEND" disabled> </form> 

Disable:

  <input id="contactsubmit" class="button" type="submit" value="SEND" disabled> 

Now that the user continues to print, I would like it to be checked, and if everything is correct, turn on the button, I know that I can do this with jQuery .change() . But is there any standard way to execute?

I have done a lot of research, but I don’t see what I'm trying to achieve, I can do this with authentication, but not be based.

UPDATE

Here is the plugin that I use with bootstrap to achieve what I want, Validator.js .

Answer 1

Not quite what you are looking for, because most forms cannot be submitted unless your form is validated. Listening to whether the form is being checked and then turning on the submit button seems redundant.

So data-abide has that in mind when they created

If the submit event is fired, the valid.fndtn.abide event is valid.fndtn.abide when the form is valid and the invalid.fndtn.abide event is invalid.fndtn.abide when the form is invalid.

with that in mind I would turn on the button and then

 $(form) .on('invalid.fndtn.abide', function () { var invalid_fields = $(this).find('[data-invalid]'); // tell the user that invalid fields must be fixed before submit }) .on('valid.fndtn.abide', function () { // your submit action here. }); 

There is an option in /foundation.abide.js if you want to change the validation work.

  Abide.defaults = { validateOn: 'fieldChange', // options: fieldChange, manual, submit 

try changing it to manual and see if it works like < abide : {live_validate : true, // validate the form as you go , which was in older versions

Answer 2

 <a href="#" class="button disabled">Disabled Button</a>