Question

我正在设置注册页面并寻找一个干净的解决方案，以便在提交表单之前使用onChange事件的执行jQuery年龄检查 / strong>即可。我有一个简单的形式（缩短）：

<form action="" id="birthday_form" name="birthday"> <select name="field_4_1"> <option value="0">[ DAY ]</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> <select name="field_4_2"> <option value="0">[ MONTH ]</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> </select> <select name="field_4_3"> <option value="0">[ YEAR ]</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> </select> <div id="result_of_age"></div> <input type="submit" name="submit_birthday" value="Send" /> </form>

我知道如何使用jQuery.ajax（）+＆＃34; serialize＆＃34;将结果输入到准备好的DIV中。提交表单时，我正在寻找一个解决方案，只要设置了所有3个选择字段就已经显示结果。我确定它是可能的，但哪种方式是解决这个问题的最佳解决方案？

有什么想法吗？

最好的问候。

Answer 1

您可以向选择添加data- *属性以跟踪其就绪状态。进行选择时，设置为true并检查其他选择的状态。设置第3个并且所有三个都为真时，请拨打电话。基本上，它就像一个锁定的翻转者。

$(this).attr('data-ready', 'true'); // in onChange handler

function IsFormReady() {
  If ($('selOneId').attr('data-ready')==='true' && //same with other 2 selects){
    YourAjaxCall();
  }
}

Answer 2

$('select', '#birthday_form').on('change', function() {
    var day  = $('[name="field_4_1"]').val(),
        month  = $('[name="field_4_2"]').val(),
        year = $('[name="field_4_3"]').val(),
        age = 18,
        birthdate = new Date(),
        currdate = new Date();

    if (day!='0'&&month!='0'&&year!='0') {
        birthdate.setFullYear(year, month-1, day);
        currdate.setFullYear(currdate.getFullYear() - age);

        if ((currdate - birthdate) < 0){
            $('#result_of_age').text('You are not old enough to join');
            this.form.onsubmit = function() { return false; }
        }else{
            $('#result_of_age').text('You are old enough to join');
            this.form.onsubmit = function() { return true; }                
        }
    }
});

FIDDLE

使用下拉字段使用jQuery.AJAX进行年龄验证？

2 个答案: