I have a submit button for an unsubscribe page, I would like to remove a "disabled" class to the button when user inputs a valid email. As of now I have the class being toggled based on "input" which kind of works but I would rather the user have to input a valid email to remove the "disabled" class. I am using jquery validation for the validation I'm just not sure how to base the buttons class toggle with jquery validate input. Any Ideas?
HTML:
<div class="form-group">
<input type="email" class="form-control email-input input-lg"
name="email">
</div>
<button id="unsubscribe-submit"
class="disabled">
<span class="btn-text>Submit</span>
</button>
jQuery:
$($emailInput).on('input', function() {
$('#unsubscribe-submit').toggleClass('disabled', this.value.trim().length === 0);
});
jQuery Validation:
($unsubscribeForm.length) {
$unsubscribeForm.validate({
errorClass: 'has-error',
errorElement: 'span',
debug: true,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: 'An email address is required.',
email: 'Please provide a valid email address.'
}
}
});
}
As you are already using the HTML input type "email", you can make use of modern browsers' integrated form validation. Calling checkValidity() on an input element will tell you whether its current value is regarded as valid or invalid by the browser. Use this to either remove or add the class to the button. In this demonstration, I also showed how to add/remove the disabled attribute. It would be preferrable to simply using a class, because you can still click the button even if it has the disabled class.
$(document.querySelector('input[type="email"]')).on('input', function() {
// use this to add/remove a class
$('#unsubscribe-submit')[this.value.length && this.checkValidity() ? 'removeClass' : 'addClass']('disabled');
// or this to add/remove the disabled attribute
$('#unsubscribe-submit').attr('disabled', this.value.length && !this.checkValidity());
});
.disabled,
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<input type="email" class="form-control email-input input-lg" name="email">
</div>
<button id="unsubscribe-submit" class="disabled" disabled>
<span class="btn-text">Submit</span>
</button>
You do not even need JavaScript to change the button with HTML5 validation. Use input email and set it to be required. When it is not valid, the form is invalid which you can target the button to set your style
form:invalid button {
color: red;
}
<form>
<input type="email" required>
<button> submit</button>
</form>
Related
I'm using Jquery Validate in my web form. I have an empty input, however the input is populated dynamically with text on the click of a button. Validation doesn't seem to work when I do this.
when the input is empty, on submit validation works (input turns red).
when input is populated dynamically, it stays red, it should turn green
My code is below and here's a fiddle;
In the fiddle, click submit when the input is empty, then toggle the button to No - the input should change to green without having to submit the form again.
HTML
<p>Does this item have an inventory number?</p>
<p>
<form id="myForm" method="post">
<input type="checkbox" class="input-large" value='1' name="btn" id="btn">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<input type="text" class="input-large" id="type" name="type" placeholder="Inventory Number">
</div>
</div>
</div>
<input type="submit" class="submit" value="Submit">
</form>
Jquery
$(function() {
$('#btn').bootstrapToggle({
on: 'No',
off: 'Yes',
onstyle: 'danger'
});
})
$("#myForm").validate({
rules: {
type: {
required: true,
minlength: 2
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
unhighlight: function(label) {
$(label).closest('.control-group').addClass('success');
},
});
$("#btn").on("change", function() {
if ($(this).prop('checked') == true) {
$("#type").attr("readonly", "true");
$("#type").val("Personal Item");
$("#type").rules("remove", "number minlength maxlength");
}
if ($(this).prop('checked') == false) {
$("#type").removeAttr("readonly");
$("#type").val("");
$("#type").rules("add", {
required: true,
minlength: 5,
maxlength: 6
});
}
});
You use some custom highlight and unhighlight on the control-group.
Just add this to the checked==true condition:
$("#type").closest('.control-group').removeClass("error").addClass("valid");
$("#type").next(".error").remove();
Since the rule is removed, it is not re-validated...
Your Fiddle updated.
The Jquery Validation plugin docs say you can validate that at least one radio button is selected. However, when trying to do so with some extra layout, I am not getting the error highlighting.
My code looks like this.
<div class="form-group" style="margin-top:25px;">
<label for="factorSelect" class="control-label col-sm-3">Please select a recovery method</label>
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<div class="form-control" style="height:auto;">
<div class="radio">
<label class="noBold-text" style="font-size: 1em">
<input id="factorSelect_email" name="factorSelect" type="radio" value="EMAIL" />Send me an email
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
</label>
</div>
<div class="radio">
<label class="noBold-text" style="font-size: 1em">
<input id="factorSelect_sms" name="factorSelect" type="radio" value="SMS" />Send an SMS to my phone
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
</label>
</div>
</div>
</div>
</div>
$("#forgotPasswordForm").validate({
rules: {
fpUsername: {
required: true,
minlength: 3
},
factorSelect: {
required: true
}
},
messages: {
fpUsername: {
required: "Please enter your username or email",
minlength: "Your username must be at least {0} characters"
},
factorSelect: {
required: "You must select a recovery method"
},
},
highlight: function (element, errorClass, validClass) {
$(element).parents(".form-group").addClass("has-error").removeClass("has-success");
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".form-group").addClass("has-success").removeClass("has-error");
},
});
The has-error class never gets applied to the radio button group.
I reproduced the error you have in this CodePen...
The error message produced by jQuery Validate is positionned right after the invalid element... Which is the default.
Now you can position that error message elsewhere, using errorPlacement.
In this Solution, I just placed it right after the parent .input-group. I'm sure that is the puzzle piece you where looking for.
;)
errorPlacement: function(errorLabel, invalidElement){
if( $(invalidElement).is("[type='radio']") ){
var inputGroup = $(invalidElement).closest(".input-group");
inputGroup.after(errorLabel);
}
},
EDIT
With your full code, that is easier to work...
;)
The default behavior of a button in a form is to submit (Reference, see "type").
So if the type is omitted, that is what it does.
And the .validate() function isn't triggered by a button type="button".
So...
You have to prevent the default submit in order to validate first.
Then, submit if the form is valid.
This is achieved by .preventDault() and submitHandler
$("#forgotPasswordForm").on("submit",function(e){
e.preventDefault(); // Prevents the default form submit (Have to validate first!)
})
.validate({
// Skipping some lines here...
submitHandler: function(form) {
form.submit(); // Submits only if the form is valid
}
});
Updated CodePen
Ok, fixed it. Thank you for the help above with the placement of the error message. That was not my initial issue but did come up once I got the error to display at all. Your fix works great.
My primary issue turned out to be a CSS conflict with some styles that turn the radio buttons into pretty font-awesome icons. The little snippet that hides the default radio buttons causes the validation to fail as it must only look for visible fields. I set the height to zero instead and so far it seems to work.
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
/*display: none;*/
height:0;
}
If you have a <form> and a <button type='submit'> and you click on the submit button, it will do the default form validation, such as checking whether an <input> is required or not. It would normally say Please fill out this field.
However, if I programmatically submit the form through $("form").submit() for example, it would submit it without performing any checks.
Is there a simpler way to perform the default form validations using native JavaScript? There seems to be only checkValidity() on the form element which return true or false. And if I call the same native function on the input itself, it doesn't really do anything.
Here is a demo code of what I mean:
http://jsfiddle.net/totszwai/yb7arnda/
For those still struggling:
You can use the Constraint validation API - https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation
<div id="app">
<form>
<input type="text" required placeholder="name">
<input type="text" required placeholder="email">
</form>
<button id="save">Submit</button>
</div>
const form = document.querySelector("form");
document.getElementById("save").addEventListener("click", e => {
e.preventDefault();
if (form.checkValidity()) {
console.log("submit ...");
} else {
form.reportValidity();
}
});
Check out and play here: https://stackblitz.com/edit/js-t1vhdn?file=index.js
I hope it helps or gives you ideas. :)
I think this might be the answer you are looking for :
JavaScript :
document
.getElementById('button')
.addEventListener("click",function(e) {
document.getElementById('myForm').validate();
});
HTML :
<form id="myForm" >
First name: <input type="text" name="FirstName" required><br>
Last name: <input type="text" name="LastName" required><br>
<button id="button">Trigger Form Submit</button>
</form>
Demo : http://jsfiddle.net/2ahLcd4d/2/
I am trying to get the jquery validator to run on the specific submit button not on all buttons.
<form id="incidentform" action="/emplincidata.php" method="get">
<input type="submit" class="button" name="updateincidentButton" value="Update Incident"/>
<input type="button" class="button" name="cancelincidentButton" value="Cancel Incident"/>
<br />
<div class="makescroll" id="bysuper">
<div class="incident">
<label class="title">TO BE COMPLETED BY THE SUPERVISOR</label><br />
<div>
<label class="eighth" for="incidate">Incident Date</label>
<input type="text" id="incidate" name="incidate" class="datepick" />
<label class="eighth" for="incidtime">Incident Time</label>
<input type="text" id="incidtime" name="incidtime" class="timeinput" />
<label class="eighth" for="shift">Shift</label>
<select id="shift" name="shift">
<option selected="selected"></option>
<option>Day</option>
<option>Evening</option>
<option>Night</option>
</select>
</div>
</div>
</div>
</form>
Here is the javascript. This code does not work when I have the submit catptured. I also tried click here and it failed.
$(function(){
$("#updateincidentButton").submit(function(){
$("form").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
})
})
You have not given Id selector to your submit button. so please give Id selector as below:
<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"/>
Please try as shown below:-
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
/* Bind Click() to Button*/
$("input[name=updateincidentButton]").click(function () {
if ($(#incidentform).valid()) {
// post stuffs
}
return false;
});
});
Try this:
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
},
submitHandler :function() {
// DO STUFF HERE WHEN EVERYTHING IS VALIDATED e.g submit form
alert('VALID');
}
})
});
Fiddle: http://jsfiddle.net/ZKge8/
Just scroll to the bottom of the page to skip the validate plugin script.
I am trying to use jQuery Validate to prevent my ajax form submit when three fields contain any characters other than digits. Apparently I'm doing something wrong, but I can't see what.
EDIT: There seem to be two errors. My validation rules use the field ID instead of the field name. However, after fixing that problem, the form still validates unexpectedly..
This is my jQuery code:
(function() {
$(document).ready(function() {
formSubmits();
/**
* Handles all the form submits that go on.
* This is primarily the ID search and the form submit.
*/
function formSubmits() {
/*** SAVE RECIPE ***/
// validate form
$("#category-editor").validate({
rules: {
"time-prep": {number: true}, /* not sure why validation doesn't work.. */
"time-total": {number: true}, /* according to this, it should: http://goo.gl/9z2odC */
"quantity-servings": {number: true}
},
submitHandler: function(form) {
// submit changes
$.getJSON("setRecipe.php", $(form).serialize() )
.done(function(data) {
// de-empahaize submit button
$('.footer input[type=submit]')
.removeClass('btn-primary')
.addClass('btn-default');
});
// prevent http submit
return false;
}
});
}
});
})(jQuery);
Here's what I see in the inspector when I put a breakpoint inside the submitHandler. It is getting to the submitHandler despite bad input (a value of 'dsdfd' instead of '123')
This is the relevant markup:
<form id="category-editor" class="form-inline" method="get">
....
<div class='form-group'>
<div>
<label for="time-prep">Prep time (min):</label>
<input value="" id="time-prep" name="activeTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-prep-desc" type="number">
<input value="" id="time-prep-desc" name="activeTimeDesc" class="form-control subtle" type="text">
</div>
</div>
<div class='form-group'>
<div>
<label for="time-total">Total time (min):</label>
<input value="" id="time-total" name="totalTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-total-desc" type="number">
<input value="" id="time-total-desc" name="totalTimeDesc" class="form-control subtle" type="text">
</div>
</div>
<div class='form-group'>
<div>
<label for="quantity-servings">Servings:</label>
<input value="" id="quantity-servings" name="servings" class="form-control jqValidateNum" type="number">
</div>
</div>
....
</form>
You've got your rules set up with the "id" values for the <input> elements instead of their "name" values. Should be:
rules: {
"activeTime": {number: true},
"totalTime": {number: true},
"servings": {number: true}
},
edit — now that you've fixed that, I think the problem is that the "value" properties of the input elements are empty, because you've declared them type=number. Firefox and Chrome let you type anything into the fields, but they won't have a non-empty value unless the fields really do contain numbers.
If you also mark the fields as required, then it works. fiddle