在提交之前检查下拉值

时间:2012-06-04 02:41:55

标签: javascript jquery

我需要帮助提交带有多个相同值的下拉列表的表单,

条件:如果未选择email,则需要选择提醒电子邮件,否则请检查已选择的值

<form method="post" action="record_save.php">
    <div id="student_records">
        <select name="select1">
            <option value="0">None</option>
            <option value="1">email</option>
            <option value="2">firstname</option>
            <option value="3">lastname</option>
        </select>
        <select name="select2">
            <option value="0">None</option>
            <option value="1">email</option>
            <option value="2">firstname</option>
            <option value="3">lastname</option>
        </select>
        <select name="select3">
            <option value="0">None</option>
            <option value="1">email</option>
            <option value="2">firstname</option>
            <option value="3">lastname</option>
        </select>
        <!-- until -->
        <select name="select10">
            <option value="0">None</option>
            <option value="1">email</option>
            <option value="2">firstname</option>
            <option value="3">lastname</option>
        </select>
        <input type='submit' name='submit'>
    </div>
</form>

2 个答案:

答案 0 :(得分:1)

这应该做你想要的。

我遍历所选的选项并计算每次发生的次数。在第一次检测到重复时,我添加了一条错误消息。我还确保选择了一封电子邮件。如果有任何错误,我们会提醒他们,否则表格会被提交。

(function ($) {

    var form = $('#student_records').parent();

    form.submit(function (event) {

        event.preventDefault();

        var selected = {},
            errors = [];

        form.find('option:selected').each(function (index, elem) {

            var val = $(elem).val().trim();

            if (! selected[val]) {
                selected[val] = 1;
                return;

            } else if (selected[val] == 1) {

                errors.push('Already selected: ' + $(elem).text());
            }

            selected[val] += 1;
        });

        if (! selected[1]) {
            errors.push('Must select email.');
        }

        if (errors.length) {
            alert(errors.join("\n"));
            return;
        }

        form.submit();
    });

}) (jQuery);

答案 1 :(得分:0)

您应该使用JQuery或JavaScript来检查值。如下所示:

 if (validateTheForm()) { 
    $('#yourForm').submit();
 }

function validateTheForm () {
$(':text, select, textarea').each(function() {  
    if ($(this).val().trim().length == 0) {  
        $(this).addClass('errorField'); 
            return false; 
    } else {
        $(this).removeClass('errorField').addClass('successField');
        return true;
    }    
});
};