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.
Related
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>
I have the following jquery code
$().ready(function){
$("#Form").validate({
rules:{
DL:{
minlength:2
}
}
});
}
message:{
DL:{
minlength:"DL should be of at least 5";
}
}
The validation required is that the field DL should have length of 5.
The html code is below
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input
type="text" class="form-control" id="DL" required>
</div>
But the page does not seem to validate, after clicking a button, instead of showing message the page just scrolls upwards.
Here is your solution
https://jsfiddle.net/geradrum/far1fj1n/
All the code have syntax errors.
And the $() should be $(document)
The main problem is that the rules object looks for the element's name and you were using the id of the element.
index.html
<form id="FORM">
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input type="text" class="form-control" name="DL" required>
</div>
<input type="submit" value="Validate!">
</form>
app.js
$(document).ready(function(){
$( "#FORM" ).validate({
rules: {
DL: {
required: true,
minlength: 5
}
},
messages: {
DL: "DL should be of at least 5"
}
});
});
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 have dynamically created rows, on each rows i have a add button when user click on the add button then dynamically created form will be loaded on the bootstrap propover.
FIDDLE DEMO
my problem is :
why this code is NOT getting call?
Basically i am Submitting this form From bootstrap popover ?
...............
...............
console.log($("#"+formidd));// NOTE: i have accurate form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
...............
...............
Any help will be highly appreciated.Please help me...
Form looks like this:(I want to validate It & submit it when user press ENTER)
My html data look like this:
<div id="project-div-id">
<ul style="padding: 0px 0 2px;margin-left: 0px;">
<li><span class="slilink"> tour </span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj" style="display:none;">
<input type="text" value="1st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> personal</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj" style="display:none;">
<input type="text" value="2st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> business</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj" style="display:none;">
<input type="text" value="3rd form">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
</div>
This is my FULL jquery code:
<script type="text/javascript">
$(document).ready(function() { var formidd='';
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').html();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
console.log($("#"+formidd));//i have loaded form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
});
$(document).click(function(e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.add_btn').popover('hide');
}
});
});
</script>
I think I see what you're trying to do. The enter button will not work by default unless you have an <input type='submit' /> somewhere in the form.
Some hackery you can try is to place a submit button right after your input, give it a classname like "invisible", and set that class to remove all borders, margins, padding, etc... Warning, setting display:none will not work because some browsers effectively remove the element.
For example: jsfiddle
EDIT: I only got tour to work in the fiddle, but the idea is the same. There has to be a submit input inside the form.
This is my form :
<FORM id="form1">
Fields :
<fieldset name="titles">
<br>
<INPUT class = "fit" type="text" name="title">
<br>
<INPUT class = "fit" type="text" name="title">
<br>
<INPUT class = "fit" type="text" name="title">
<br>
<INPUT class = "fit" type="text" name="title">
</fieldset>
</FORM>
How can I check if at least two out of these four fields are filled? Here's what i'I've tried :
$('#form1').validate({ // initialize the plugin
rules: {
title: {
required: "input[name='title']",
minlength: 2
},
messages: {
title: "You must fill at least two titles!"
}
}
});
But it's not working, it always returns a valid form... I'm a newbie to jQuery, any help would be appreciated.
For 1 statement to grab both 'select' and 'input' elements, simply change your single jQuery selector to a multiple selector,
Eg:-
$(this).find('input[type=text], select').each(function(){
if($(this).val() != "") valid+=1;
});
Try this with the button:
$("#submit_button").click(function(){
if($('input[text]').length < 2) {
alert('at least two text inputs are filled');
return false;
}
});