Looking for a hand on my jQuery and JS script - javascript

What I have is in my fiddle here http://jsfiddle.net/mPuj9/4/
What I tried to do is to disable the button until all of textboxes are filled and the checkbox is checked. My current code is not good, it let you submit in some cases and I don't know how to work it with the checkbox.
CODE
$(document).ready(function() {
$('.textfield').blur(function() {
if ($.trim(this.value) == "") {
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});
$(document).ready(function() {
$('#termid').change(function() {
var val = $(this).val();
$('#reservationdetails').empty().addClass('loading').load('../kratisis/forms/' + val + '.php', function() {
$('#reservationdetails').removeClass('loading')
});
});
});

Here you go
http://jsfiddle.net/mPuj9/8/
$(document).ready(function () {
$('form').delegate('input:text, input:checkbox', 'blur keyup change', function () {
if(($('form input:text').filter(function(){ return $.trim(this.value) == ''; }).length > 0)
|| ($('form input:checked').length == 0)){
$('#btnUpdate').attr("disabled", true);
}
else {
$('#btnUpdate').removeAttr("disabled");
}
});
});

Here's another way you could do this, which also works if someone presses enter in a text box, or if the browser autofilled an input:
$(function() {
$("form button").attr("disabled", true); //disable buttons at first
var inputs = 0; //keep count of the inputs
$("form input, form select, form textarea").each(function() {
inputs++; //increment counter
$(this).keypress(function() {
if ($.trim($(this).val()) != "") { //if the value isnt empty
inputs--; //decrement counter
if (inputs == 0) { //if theyre all filled in
$("form button").attr("disabled", false);
}
}
}).trigger("keypress"); //in case it was autofilled by the browser
});
$("form").submit(function(e) { //prevent the form being submitted by pressing enter
if (inputs != 0) { //if they arent all filled in
alert("Some fields aren't filled in. Please fix them and try again."); //tell the user
e.preventDefault(); //cancel sending the form
return false;
}
});
});

I think the problem is that you're not using .each() for the text fields. You're checking the one that was recently changed to see if it's value is "", but you're not checking each one.

Related

Stop form submission if radio button is checked

I have a form on FormAssembly, and I would like to stop someone submitting the form if they select the 'No' Radio Button for the question 'Are you an employer?'. I have put what I have so far in a jsfiddle.
JS:
$(document).ready(function() {
$('input#tfa_1904').click(function() {
if ($('#tfa_1904').is(':checked') {
submitButton.disabled = true;
}
else {
submitButton.disabled = false;
}
});
});
submitButton code:
document.addEventListener("DOMContentLoaded", function() {
var warning = document.getElementById("javascript-warning");
if (warning != null) {
warning.parentNode.removeChild(warning);
}
var oldRecaptchaCheck = parseInt('0');
if (oldRecaptchaCheck !== -1) {
var explanation = document.getElementById('disabled-explanation');
var submitButton = document.getElementById('submit_button');
if (submitButton != null) {
submitButton.disabled = true;
if (explanation != null) {
explanation.style.display = 'block';
}
}
}
});
In your case you don't need to check whether the radio button is checked as only one will be checked at a time. So, just capturing the click will suffice.
$(document).ready(function() {
$('input#tfa_1904').click(function() {
$('#submit_button').prop('disabled', true);
});
$('input#tfa_1903').click(function() {
$('#submit_button').prop('disabled', false);
});
});
Updated fiddle:
https://jsfiddle.net/h5r8gud1/8/

jquery return false killed submit event?

I try to use loop to validate each of every input whether they are filled or not. But end up my submit_form function doesn't get triggered.
$('#submit').click(function(){
var hold = true;
if ($('.tab2').hasClass('active') && hold == true) {
$('.tab-content:visible input').each(function(i, val) {
if ($(this).val() == '') {
alert("Please fill in valid " + $(this).attr('data-error'));
$(this).focus();
hold = true;
return false;
} else {
hold = false;
}
});
return false; //can't remove this
}
submit_form(); //not triggered although all inputs are filled
})
if I removed the return false, there will be no checking..

JQuery on form submit check required fields

I have these JQuery functions:
function CheckRequired() {
$(".required").each(function(event) {
var check = $(this).val();
if(check == '') {
event.preventDefault();
alert("One or more fields cannot be blank");
//alert($(this).attr("id"));
return false;
}
return true;
});
}
$(document).ready(function() {
$("form").each(function() {
$(this).submit(function(event) {
CheckRequired();
});
});
});
so my required fields have a class of required but when submitting a form, its showing the alert error but it still submits the form
how can i stop it submitting the form if there is an error
The result of CheckRequired() is not being returned from the submit handler.
return CheckRequired();
You might also pass the event into that function and in the case that you do not want the submit to happen, inside CheckRequired do
event.preventDefault();
I'll redo the code block...
function CheckRequired(event) {
var $form = $(this);
if ($form.find('.required').filter(function(){ return this.value === '' }).length > 0) {
event.preventDefault();
alert("One or more fields cannot be blank");
return false;
}
}
$(document).ready(function () {
$('form').on('submit', CheckRequired);
});
Try this:
$(document).ready(function() {
$("form").submit(function(event) {
if ( !CheckRequired() ){
event.preventDefault();
}
});
});
And I am smelling bug in the code. You are looping through each form, and for checking required you are doing a global find for .required
and here's the little refactor you can do to the CheckRequired function:
function CheckRequired() {
var field_with_empty_ip = $(".required").filter(function(){
return ( $(this).val() == "" );
});
return ( field_with_empty_ip.length < 0 );
}

Wait for the return of the loop on form submit

I have the code below, the form is needed to be validated before it can submit the form.
But the problem is, the form continues to submit without validating.
<form action='#' method='post' onsubmit='return validate();'>
function validate()
{
$('form').find(':input:not(:submit,:hidden), select, textarea').each(function(e)
{
$(this).removeClass('redBox');
var rq = $(this).attr('requiredz');
if(rq != undefined)
{
if($(this).val().trim() == '')
{
$(this).addClass('redBox');
$("#errorMsg").html('Red boxes cannont be left empty!');
return false;
}
}
});
});
How to handle the return of a loop?
Dont submit the form once encountered return false on the loop.
try this:
function validate()
{
var passes = true;
$('form').find(':input:not(:submit,:hidden), select, textarea').each(function(e)
{
$(this).removeClass('redBox');
var rq = $(this).attr('requiredz');
if(rq != undefined)
{
if($(this).val().trim() == '')
{
$(this).addClass('redBox');
$("#errorMsg").html('Red boxes cannont be left empty!');
passes = false;
}
}
});
return passes;
});
Do not use return.
$('#my-form').on('submit', function(event){
if (validate() === false) {
event.preventDefault(); // like return false;
}
});
For more information see jQuery submit docs.
Each function has it's own returned value, the default returned value is an undefined value. You should check the length of the invalid elements after the each loop and return a proper value, since you are using jQuery I'd suggest:
$('form').on('submit', function (event)
{
var $invalid = $(this)
.find(':input:not(:submit,:hidden), select, textarea')
.removeClass('redBox')
.addClass(function () {
return this.getAttribute('requiredz')
&& $.trim(this.value) === ''
? 'redBox'
: null;
}).filter('.redBox');
if ($invalid.length)
{
$("#errorMsg").html('Red boxes cannont be left empty!');
return false;
}
});

Can not post the data after validation

The code below are to validate a set of selectbox, however, it will not post and go to that post page after it pass the validation, how to fix it? I have added return true; at the end but it seems not working, Thank you.
var $selects = $('form select[name^=select]'),
values = [];
$(':submit').click(function(e) {
e.preventDefault();
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
return false;
}
return true;
});
$(':submit').click(function(e) {
//e.preventDefault(); delete this.
It's preventing the default behavior of the submit button- submitting the form...
return false Does e.preventDefault(); + e.stopPropagation();
there is something that blocks to your event listener default action
var $selects = $('form select[name^=select]'),
values = [];
$(':submit').click(function(e) {
//e.preventDefault(); <--remove this line
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
e.preventDefault(); //<--PUT IT HERE~!!!
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
e.preventDefault(); //<-- AND PUT IT HERE~!!!
return false;
}
return true;
});
When you want to submit it you need $('form').submit().

Categories