I'm familiar with foundation abide a little, I was wondering how can I make the button disable and as the user type it gets validated and change the button to enable for submit.
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, as a user keep typing I would like it to be validated and if everything is correct enable the button, I know I can do this with jQuery .change()
, But is there any standard way for abide?
I have done a lot of research, but I don't see what I'm trying to achieve, I can do it with bootstrap validation but not foundation.
Here is the plugin I use with bootstrap to achieve what I want, Validator.js.
Not quite what you are looking for because most forms can not be submitted unless your form is validated. Listening to see if the form validates and then enabling a submit button seems like its overkill.
Thus data-abide
has this in mind when they created
If a submit event is fired, a
valid.fndtn.abide
event is triggered when the form is valid and aninvalid.fndtn.abide
event is triggered when the form is invalid.
with that in mind i would enable 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 the /foundation.abide.js
if you want to change out the validation works
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
that was in older versions
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With