Can I simplify / optimize this JQuery code?
I wrote a code that will check two dates: they are split into two days (# enddate-1-dd, # date-1-dd), two months of input (# enddate-1-mm, # date-1-mm) and biennial entries (# enddate-1, # date-1)
I wanted to check first that they are all actually numbers, but then I wanted to check each one to make sure it is in the date format, at the moment it is like this:
function validate_form () {
retVal = true; // if the statements below fail, return true
if(retVal == true) {
// check whether the available hours they've entered are a valid time!
$(":text").each(function() {
$this = $(this); // cache the object
if (isNaN($this.val())) {
$this.focus();
$.jGrowl('Please enter a valid date!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
if(retVal == true) {
$("#date-1-dd").each(function() {
$this = $(this); // cache the object
if ($this.val() > 31) {
$this.focus();
$.jGrowl('Please enter a valid day, should be no more than 31!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
if(retVal == true) {
$("#enddate-1-dd").each(function() {
$this = $(this); // cache the object
if ($this.val() > 31) {
$this.focus();
$.jGrowl('Please enter a valid day, should be no more than 31!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
if(retVal == true) {
$("#date-1-mm").each(function() {
$this = $(this); // cache the object
if ($this.val() > 12) {
$this.focus();
$.jGrowl('Please enter a valid month, should be no more than 12!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
if(retVal == true) {
$("#enddate-1-mm").each(function() {
$this = $(this); // cache the object
if ($this.val() > 12) {
$this.focus();
$.jGrowl('Please enter a valid month, should be no more than 12!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
if(retVal == true) {
$("#date-1").each(function() {
$this = $(this); // cache the object
if ($this.val() < 1900 || $this.val() > 3000) {
$this.focus();
$.jGrowl('Please enter a valid year!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
if(retVal == true) {
$("#enddate-1").each(function() {
$this = $(this); // cache the object
if ($this.val() < 1900 || $this.val() > 3000) {
$this.focus();
$.jGrowl('Please enter a valid year!', { theme: 'smoke' });
retVal = false; return false;
}
});
}
return retVal; // return either true or false, depending on what happened up there! ^
}
Sorry if I feel like I'm asking a stupid question, since my code is working fine, I just think it's a garbage way to do it with a lot of repetition, but I can't think of any way to do it more efficiently?
thank
+2
source to share
3 answers
function validate_form_checks() {
var error;
// check whether the available hours they've entered are a valid time!
$(':text').each(function() {
if(isNaN($(this).val())) {
$(this).focus();
error = 'Please enter a valid date!';
return false;
}
});
if(error)
return error;
$('#date-1-dd, #enddate-1-dd').each(function() {
if($(this).val() > 31) {
$(this).focus();
error = 'Please enter a valid day, should be no more than 31!';
return false;
}
});
if(error)
return error;
$('#date-1-mm, #enddate-1-mm').each(function() {
if($(this).val() > 12) {
$(this).focus();
error = 'Please enter a valid month, should be no more than 12!';
return false;
}
});
if(error)
return error;
$('#date-1, #enddate-1').each(function() {
if($(this).val() < 1900 || $(this).val() > 3000) {
$(this).focus();
error = 'Please enter a valid year!';
return false;
}
});
if(error)
return error;
return true;
}
function validate_form() {
var result = validate_form_checks();
if(result === true) {
return true;
} else {
$.jGrowl(result, { theme: 'smoke' });
return false;
}
}
Of course, validation that provides feedback on all errors in the form, not just the first, is prominent, better.
+2
source to share
At first glance, you can create a function from these identical sections and simply call it as needed. You shouldn't repeat .
Here is a blog post on approving dates that can be enlightening. And here is a SO answer that gives the jQuery plugin answer for date validation.
+1
source to share
Yes here:
function validate_form() {
return retVal = !0, retVal == 1 && $(":text")
.each(function () {
return $this = $(this), isNaN($this.val()) ? ($this.focus(), $.jGrowl("Please enter a valid date!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal == 1 && $("#date-1-dd")
.each(function () {
return $this = $(this), $this.val() > 31 ? ($this.focus(), $.jGrowl("Please enter a valid day, should be no more than 31!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal == 1 && $("#enddate-1-dd")
.each(function () {
return $this = $(this), $this.val() > 31 ? ($this.focus(), $.jGrowl("Please enter a valid day, should be no more than 31!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal == 1 && $("#date-1-mm")
.each(function () {
return $this = $(this), $this.val() > 12 ? ($this.focus(), $.jGrowl("Please enter a valid month, should be no more than 12!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal == 1 && $("#enddate-1-mm")
.each(function () {
return $this = $(this), $this.val() > 12 ? ($this.focus(), $.jGrowl("Please enter a valid month, should be no more than 12!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal == 1 && $("#date-1")
.each(function () {
return $this = $(this), 1900 > $this.val() || $this.val() > 3e3 ? ($this.focus(), $.jGrowl("Please enter a valid year!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal == 1 && $("#enddate-1")
.each(function () {
return $this = $(this), 1900 > $this.val() || $this.val() > 3e3 ? ($this.focus(), $.jGrowl("Please enter a valid year!", {
theme: "smoke"
}), retVal = !1, !1) : void 0
}), retVal
}
0
source to share