Можно ли вообще упростить / оптимизировать этот код Jquery?

Question

Я написал некоторый код, который будет проверять две даты - они разделены на двухдневные вводы (# enddate-1-dd, # date-1-dd), двухмесячные вводы (# enddate-1-mm, # дата-1-мм) и два года ввода (# enddate-1, # date-1)

Прежде всего я хотел проверить, что все они на самом деле числа, но потом я хотел проверить каждый из них, чтобы убедиться, что он в формате даты, на данный момент это так:

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! ^

}

Извините, если мне кажется, что я задаю глупый вопрос, так как мой код работает нормально, я просто думаю, что это глупый способ сделать это с кучей повторений, но я не могу придумать ни одного способа делать это более эффективно?

Спасибо

Answer 1

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;
    }
}

Конечно, проверка, обеспечивающая обратную связь по всем ошибкам в форме, а не только по первой, вроде бы, знаете, лучше.

Answer 2

На первый взгляд вы можете создать функцию из этих идентичных разделов и просто вызывать ее по мере необходимости. Ты не должен повторяться .

Вот сообщение в блоге о проверке дат, которые могут быть поучительными. И вот SO-ответ, который дает ответ jQuery-плагина на дату проверки.

Answer 3

Да, здесь:

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
}