I'd like to use the jQuery.Form/Validate plugins to only allow my form to be submitted if any of inputs were actually changed.
There is callback logic for this using beforeSubmit: : http://jquery.malsup.com/form/#options-object. However, I can't seem to make it work.
Here's what I have so far:
$(document.body).on('click', 'input[type="submit"]', function(){
var $form =$('form');
$form.validate({
submitHandler: function($form) {
$($form).ajaxSubmit({
beforeSubmit: function(arr, $form){
var value = '', storedValue='';
$($form+':input').each(function (index, el) {
value=$(el).val();
storedValue=$(el).data("stored");
if(value!=storedValue){
console.log("Changed"); return true;
}
else {
return false; console.log("NOT changed");
}
});
...success handling, etc..
beforeSubmit: function(arr, $form) {
var value = '', storedValue='';
$($form+':input').each(function (index, this) {
value=this.value;
storedValue=$(this).data("stored");
if(value!=storedValue){
console.log("Changed");return true;
}
else {
return false; console.log("NOT changed");
}
});
}
Here's the HTML:
<form id="myForm">
<input data-stored="my title" value="my title"/>
<textarea data-stored="my description">my description</textarea>
<input type="submit" value="submit/>
</form>
Currently the console.log shows, "Changed" regardless of whether the storedValue is equal or not to the input.
First of all it will never show "Not Changed" since it returns false before it hits that part. You should filter out the submit button too since you probably aren't checking its value.
$($form+':input').not(':submit').each(function(index, this) {
value = this.value;
storedValue = $(this).data("stored");
if (value != storedValue) {
console.log("Changed");
return true;
}
else {
console.log("NOT changed");
return false;
}
});
UPDATE
With great assistance from #wirey, together we've (#timrpeterson and #wirey) put together a solution. Instead of returning true/false within the each() loop, I incremented a value ,totalChanged, and assessed after the each() loop whether or not it was greater than 0.
here's the code:
beforeSubmit: function(arr, $form){
var value = '', storedValue='', totalChanged=0;
$('#myForm :input').not(':submit,:hidden').each(function (i, el) {
//console.log($(this));
console.log($($form));
value=$(el).val();
storedValue=$(el).data("stored");
if (value != storedValue) {
totalChanged++;
}
else {
}
}); //each
if(totalChanged>0){
console.log("at least one changed");
return true;
}
else{
console.log("All NOT changed");
return false;
}
} //beforeSubmit
Related
I am trying to validate some input fields. More specifically, the number always has to be positive.
EDIT: JS code
$(document).ready(function($) {
$('.error-message').hide();
function priceCheck() {
$('input[class="price"]').each(function() {
priceValue = $(this).val();
console.log(priceValue); //only runs until here and seems it exists the function then
if (priceValue <= 0) {
evt.preventDefault();
return false;
} else {
}
});
}
//POST FORM
$("#offerInquiry").on('valid.fndtn.abide', function(evt) {
//prevent the default behaviour for the submit event
// Serialize standard form fields:
var formData = $(this).serializeArray();
var checked = $("#terms").is(":checked");
priceCheck();
if (checked == false) {
$('.error-message-container').empty();
$('.error-message-container').append("<%= pdo.translate("
checkBox.isObligatory ") %>");
$('.error-message').show();
$('.bid-error').css("display", "block");
evt.preventDefault();
return false;
} else {
loading();
$.post("/inquiry.do?action=offer&ajax=1", formData,
function(data) {
window.top.location.href = data.redirectPage;
});
}
return false;
});
});
I have written a function that I separately call on form submit. But it only runs until the console log. Why is the if else statement not executed?
You are using evt.preventDefault() but you didn't capture the event in evt.
For example, you could try this instead: add the evt parameter to the priceCheck function, and then pass evt to that function when you call it, like this: priceCheck(evt)
HOWEVER, you do not need to use preventDefault here. You can simply return a boolean value from priceCheck and use that in your submit handler.
You also you had a couple errors with string concatentation. $('.error-message-container').append("<%= pdo.translate(" checkBox.isObligatory ") %>"); was missing the + to concat those strings together . You can view errors like this in the Console tab of your JavaScript debugger. (UPDATE This is JSP injection, but it may not work the way you are trying to use it here. The server function pdo.translate will only execute once, on the server side, and cannot be called via client script... but it can emit client script. Focus on solving other problems first, then come back to this one.)
Finally, you were reading string values and comparing them to numbers. I used parseFloat() to convert those values from the input fields into numbers.
Here is the fixed code.
$(document).ready(function($) {
$('.error-message').hide();
function priceCheck() {
var priceValid = true; // innocent until proven guilty
$('input[class="price"]').each(function() {
priceValue = parseFloat($(this).val()) || 0;
if (priceValue <= 0) {
priceValid = false;
return false;
}
});
return priceValid;
}
$("form").on("submit", function() {
$("#offerInquiry").trigger('valid.fndtn.abide');
});
//POST FORM
$("#offerInquiry").on('valid.fndtn.abide', function(evt) {
//prevent the default behaviour for the submit event
// Serialize standard form fields:
var formData = $(this).serializeArray();
var checked = $("#terms").is(":checked");
var priceValid = priceCheck();
if (priceValid) {
$('.error-message').hide();
if (checked == false) {
$('.error-message-container').empty();
$('.error-message-container').append("<%= pdo.translate(" + checkBox.isObligatory + ") %>");
$('.error-message').show();
$('.bid-error').css("display", "block");
return false;
} else {
loading();
$.post("/inquiry.do?action=offer&ajax=1", formData,
function(data) {
window.top.location.href = data.redirectPage;
});
}
}
else
{
$('.error-message').show().text("PRICE IS NOT VALID");
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="offerInquiry">
Price 1
<input type="text" class="price" id="price1" value="0.00" />
<br/>Price 2
<input type="text" class="price" id="price1" value="0.00" />
<br/>
<input type='submit' />
<div class="error-message">ERROR!</div>
</form>
Using just jQuery (not validation plugin) I have devised a way to do a "if one, then all" requirement, but it's not at all elegant.
I'm wondering if someone can come up with a more elegant solution? This one uses some loop nesting and I'm really not pleased with it.
if ($("[data-group]")) {
//Store a simple array of objects, each representing one group.
var groups = [];
$("[data-group]").each(function () {
//This function removes an '*' that is placed before the field to validate
removeCurError($(this));
var groupName = $(this).attr('data-group');
//If this group is already in the array, don't add it again
var exists = false;
groups.forEach(function (group) {
if (group.name === groupName)
exists = true;
});
if (!exists) {
var groupElements = $("[data-group='" + groupName + "']");
var group = {
name: groupName,
elements: groupElements,
trigger: false
}
group.elements.each(function () {
if (!group.trigger) {
group.trigger = $(this).val().length !== 0;
}
});
groups.push(group);
}
});
//Now apply the validation and alert the user
groups.forEach(function (group) {
if (group.trigger) {
group.elements.each(function () {
//Make sure it's not the one that's already been filled out
if ($(this).val().length === 0)
// This function adds an '*' to field and puts it into a
// a sting that can be alerted
appendError($(this));
});
}
});
You don't have to store the groups in an array, just call the validateGroups function whenever you want to validate the $elements. Here is a working example http://jsfiddle.net/BBcvk/2/.
HTML
<h2>Group 1</h2>
<div>
<input data-group="group-1" />
</div>
<div>
<input data-group="group-1" />
</div>
<h2>Group 2</h2>
<div>
<input data-group="group-2" value="not empty" />
</div>
<div>
<input data-group="group-2" />
</div>
<div>
<input data-group="group-2" />
</div>
<button>Validate</button>
Javascript
function validateGroups($elements) {
$elements.removeClass('validated');
$elements.each(function() {
// Return if the current element has already been validated.
var $element = $(this);
if ($element.hasClass('validated')) {
return;
}
// Get all elements in the same group.
var groupName = $element.attr('data-group');
var $groupElements = $('[data-group=' + groupName + ']');
var hasOne = false;
// Check to see if any of the elements in the group is not empty.
$groupElements.each(function() {
if ($(this).val().length > 0) {
hasOne = true;
return false;
}
});
// Add an error to each empty element if the group
// has a non-empty element, otherwise remove the error.
$groupElements.each(function() {
var $groupElement = $(this);
if (hasOne && $groupElement.val().length < 1) {
appendError($groupElement);
} else {
removeCurError($groupElement);
}
$groupElement.addClass('validated');
});
});
}
function appendError($element) {
if ($element.next('span.error').length > 0) {
return;
}
$element.after('<span class="error">*</span>');
}
function removeCurError($element) {
$element.next().remove();
}
$(document).ready(function() {
$('button').on('click', function() {
validateGroups($("[data-group]"));
});
});
You might get some milage out of this solution. Basically, simplify and test your solution on submit click before sending the form (which this doesn't do). In this case, I simply test value of the first checkbox for truth, and then alert or check the required boxes. These can be anything you like. Good luck.
http://jsfiddle.net/YD6nW/1/
<form>
<input type="button" onclick="return checkTest()" value="test"/>
</form>
and with jquery:
checkTest = function(){
var isChecked = $('input')[0].checked;
if(isChecked){
alert('form is ready: input 0 is: '+isChecked);
}else{
$('input')[1].checked = true;
$('input')[2].checked = true;
}
};
//create a bunch of checkboxes
$('<input/>', {
type: 'checkbox',
html: 'tick'
}).prependTo('form');
$('<input/>', {
type: 'checkbox',
html: 'tick'
}).prependTo('form');
$('<input/>', {
type: 'checkbox',
html: 'tick'
}).prependTo('form');
I'm trying to validate a simple form.
<form action="#">
<input type="text" placeholder="Enter your name" id="name"/>
<button type="submit">Send</button>
</form>
This is the code I'm using.
var name = $('#name').val();
$('form').submit(function(){
checkForm();
});
function checkForm(){
if(name === ''){
$('#name').addClass('error');
console.log('error');
} else {
$('#name').removeClass('error');
console.log('success!');
}
}
The problem is that the console logs 'error' every time, regardless of my input. What am I missing here?
The variable is updated only on page load when most probably the input is empty, after that when you update the input value that is not reflected in the name variable
Instead read the value of name field in the validation method, so that it will contain the updated value
$('form').submit(function () {
//optional to prevent form submit
return checkForm();
});
function checkForm() {
//read the value of name field here
var name = $('#name').val();
if (name === '') {
$('#name').addClass('error');
console.log('error');
//return false to notify that there is an error
return false;
} else {
$('#name').removeClass('error');
console.log('success!');
}
}
Demo: Fiddle
You did not passed the value of the name in the function named checkForm().
$('form').submit(function(){
var name = $('#name').val();
checkForm(name);
});
function checkForm(name) {
if (name === '') {
$('#name').addClass('error');
console.log('error');
} else {
$('#name').removeClass('error');
console.log('success!');
}
}
So for default text swapping on input (or other type of el) I have this snippet
<input class="js_text_swap" type="text" value="Enter your email" />
if($('.js_text_swap').length > 0) {
$('.js_text_swap').each(function() {
var that = $(this),
value = that.val(); // remembering the default value
that.focusin(function() {
if(that.val() === value) {
that.val('');
}
});
that.focusout(function() {
if(that.val() === '') {
that.val(value);
}
});
});
}
So my questions are:
1) does anybody has a better solution for this?
2) does anyone know how to make this work with live added elements (added with js after page has loaded)?
Thanks
Jap!
HTML
<input placeholder="Click..." class="text" type="text">
CSS
.text{color:#aaa}
.text.focus{color:#444}
JS
$("input[placeholder]").each(function() {
var placeholder = $(this).attr("placeholder");
$(this).val(placeholder).focus(function() {
if ($(this).val() == placeholder) {
$(this).val("").addClass('focus');
}
}).blur(function() {
if ($(this).val() === "") {
$(this).val(placeholder).removeClass('focus');
}
});
});
http://yckart.com/jquery-simple-placeholder/
UPDATE
To make it work with ajax or similar you need to convert it into a "plugin" and call it after your succesed ajax request (or after dynamically crap creating).
Something like this (very simple example):
jQuery.fn.placeholder = function() {
return this.each(function() {
var placeholder = $(this).attr("placeholder");
$(this).val(placeholder).focus(function() {
if ($(this).val() == placeholder) {
$(this).val("").addClass('focus');
}
}).blur(function() {
if ($(this).val() === "") {
$(this).val(placeholder).removeClass('focus');
}
});
});
};
$("input:text, textarea").placeholder();
$("button").on("click", function() {
$(this).before('<input type="text" placeholder="default value" />');
$("input:text, textarea").placeholder();
});
demo
I have a form attribute like so:
onsubmit="return valMyForm(this);"
And a jQuery function like so:
function valMyForm(f) {
$(f,"input").each(function() {
if($(this).length < 1) {
alert("All Fields Required.");
return false;
}
else
return false;
});
}
The form still submits even if I remove all of the code and just put return false;
The return false inside the each function is just exiting out of the each loop. It's not returning the value for valMyForm
You should use something like a valid variable and return that:
function valMyForm(f) {
var valid = true;
$("input", f).each(function() {
if($(this).val().length < 1) {
alert("All Fields Required.");
valid = false;
}
});
return valid;
}
Here is a working example for you: http://jsfiddle.net/adpMT/
When you return you are inside the .each function so you are not actually returning anything from the valMyForm method.
I would recommend you avoid mixing markup with javascript and do this unobtrusively:
<form action="/foo" id="myform">
... some input fields
</form>
and then:
$(function() {
$('#myform').submit(function() {
// see if the form contains some empty inputs
return $(this).find(':input[value=""]').length > 0;
});
});