jquery code validator event - javascript

The problem is that code write for checkbox click event.
so if the user first click on checkbox then edit the field validator is not work.
i don't want write similar code for submit click event because i want disable submit button when the form filed information not valid
here is a jquery:
$(".jbcheckboxSignUp").click(function () {
$(".jbcheckboxSignUp").toggleClass("select");
var $checkbox = $("#jbCheckBoxSignUp");
$checkbox.attr('checked', !$checkbox.attr('checked'));
if ($("button.SignUpButton").attr('disabled') && $('#SignUpForm').validator() && $("#signUpEmail").val()!="" ) {
$("button.SignUpButton").removeAttr('disabled');
} else {
$("button.SignUpButton").attr('disabled','disabled');
}
});

Related

jquery change event validation stop other actions

Not sure if this has been answered elsewhere, (apologies if so!)
But...
I have an edit field which is validated on the .change() event.
what I want to do is this:
if the user has mouse-pressed the save button directly after typing, .change() fires first, then the button .click() fires after - I want to prevent the .click() event firing if the entered value doesn't get validated, once the popup has been cleared.
This is an example of what it is doing now, but this still allows other buttons to be pressed.
validateRetention(e) {
if (someCondition) {
return true;
} else {
return false;
}
}
$('input[type="number"]').change(function () {
if (!validateRetention(this)) {
alert("bad data entered");
}
}
You need to prevent default action:
$('form').on('submit', function(event) {
if(isNotValidForm) {
event.preventDefault();
// make validation balloons
}
});

jQuery disabling login submit button if username field is empty

I am trying to disable the submit button if the username textbox field is empty.
$("#txtUserName").bind("input propertychange change keyup paste", setButtonState);
var setButtonState = function () {
if ($("#txtUserName").val().trim() == "") {
$("#login").attr("disabled", true);
}
else {
$("#login").removeAttr("disabled");
}
}
The above code is working fine in all scenarios except that,when the user selects username which is saved earlier(autocomplete).
I cannot set the autocomplete off option for the textbox.
How can I catch the event when user selects text in autocomplete usernames?
Just bind your input field to the additional event select, which is fired when a user selects something from his autocompletion.
This would be your code then. I just added select and rearranged your code a little bit. Also I run setButtonState() once at the domready to be sure it's disabled.
var setButtonState = function () {
if ($("#txtUserName").val().trim() == "") {
$("#login").attr("disabled", true);
}
else {
$("#login").removeAttr("disabled");
}
}
$("#txtUserName").bind("input propertychange change keyup paste select", setButtonState);
setButtonState();
I have also updated the jsfiddle to demonstrate it.

Set of actions before enabling submit button

I want my form to meet a set of criterias before the submit button gets enabled, my form is in this order:
Text field, value has to be over 150
Set of radio selects, 1 has to be selected
TOS box, has to be checked
So far I have this:
if ((parseInt($('#amount').val(), 10) > 149) && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
{
// Enable Button here
}
Do I have to add this to everything I'm checking, for example keyup on the textfield, change on the select and checkbox and set true in variables that those fields are "OK" or how do I do it ?
You need to create a custom validate function, which you have to run onchange of your text field, and on click of your radio and checkbox click event.
Following psudo code might help you.
var textFieldValidationPassed = false;
function validateFormFields() {
//First checks if text field length is not less then 150.
// then check if one of the radio button is selected.
// then check for TOS box checked state;
if (textFieldValidationPassed && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
// enable submit button;
}
}
$('input:radio[name="radioset1"]', 'input.checkbox_check').click(function() {
validateFormFields();
})
$('#amount').keyup(function(){
if($(this).val().length > 149) {
textFieldValidationPassed =true;
validateFormFields();
}
})
it is a workaround but will work, make submit button initially...
$(":submit").on('focus',Validate);
function Validate(){
if ((parseInt($('#amount').val(), 10) > 149) && $('input:radio[name="radioset1"]').is(':checked') && ($('input.checkbox_check').is(':checked')))
{
// Enable Button here
}
else
{
//Disable button
}
}
You can just add click, change events at once like this
$("input").on("change, click", function(){
});
Write your logic within this.
Also you've checkbox validation wrong. Check box will be clicked.
$('input.checkbox_check').prop('checked')
Here is the complete code
$(function(){
$("input").on("change, click", function(){
if ((parseInt($('#UserName').val(), 10) > 149) && $('input:radio[name="gender"]').is(':checked') && $("#remember").prop('checked'))
{
$("#submit").removeAttr("disabled");
}
else{
$("#submit").attr("disabled", "disabled");
}
});
});
WORKING FIDDLE
You can use jQuery.validate. You can define custom validation methods too.
http://jqueryvalidation.org
You can use HTML5 validation. For example:
<input type="checkbox" required name="checkbox1" />
<input type="text" min="150" name="input1" />
You can see another example here http://www.w3schools.com/html/html5_form_attributes.asp
You can call it at textbox, radiobutton and checkbox onchange events.
EDIT:
$(document).ready(function () {
$("input").change(function () {
//call function.
});
});

jQuery - Clear form field with .change event

I am using the following jQuery code to switch div displays based on a change event tied to 3 radio buttons:
(function ($) {
Drupal.behaviors.change_form_fields = {
attach: function(context, settings) {
$('div.form-item-payment-method input').each(function() {
if (this.value != 'existing-bill') {
$('div#' + this.value).css('display', 'none');
}
});
$('div.form-item-payment-method input').change(function() {
show_class = this.value;
$('div.form-item-payment-method input').each(function() {
if (this.value != show_class) {
$('input#edit-' + this.value).val('');
$('div#' + this.value).css('display', 'none');
} else {
$('div#' + this.value).css('display', 'block');
}
});
});
}
}
}(jQuery));
This works fine and dandy, but I want to add some more to it.
If a user selects a radio button, I want to blank/clear out the form fields in the other groups. Like the onload (.each), they have divs around the display content.
I tried using .attr and .val, but the form fields would not clear when selecting another radio button. What am I missing? jQuery 1.4x+
val('') should do the trick, so there must be some other issue with either the selector, or the code not being run.
Use the radio buttons change event that should help you.
$("input[type=radio][name=groupname]").change(function(){
//Code the clear the form fields or other logic here.
});

jQuery checkbox click shows input field - doesn't work

I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/

Categories