Как вернуть «действительный», если тип ввода = «файл» = файл выбран?

Question

Я использую jquery и подключаемый модуль jquery validate для своей формы.

Если input_17 имеет содержимое length > 1, необходимо выбрать файл input_1_67.Это работает.

        input_17: {
        required: function(element) {
            return $("#input_1_67").val().length > 1
        }
    }

Теперь, если пользователь выбрал файл, который мне нравится возвращать «действительный» класс в input_17.Любые идеи, как я могу получить этот класс?И еще: мне нравится добавлять этот класс, только если

$("#input_1_67").val().length > 1

и выбран файл.

Answer 1

Если вы используете плагин валидатора jQuery, вам не нужно добавлять какие-либо классы к своим входам, валидатор сделает это за вас.

Насколько мне известно, браузер не позволяетВы читаете путь к файлу или устанавливаете его в этом отношении.Единственное, что вы сможете получить - это имя файла.Это ограничение безопасности для предотвращения несанкционированного доступа к файлам.Вы можете получить имя файла, получив значение.После этого вы можете выполнить дополнительную проверку типа файла (но ненадежно на клиенте).Если вы хотите добавить пользовательское правило в валидатор для проверки типа файла, то вы можете сделать это:

jQuery.validator.addMethod("filetype", function(value, element) {
    var types = ['jpeg', 'png', 'gif'],
        ext = value.replace(/.*[.]/, '').toLowerCase();

    if (types.indexOf(ext) !== -1) {
        return true;
    }
    return false;
}, 'Insert invalid message here');

Чтобы сделать вышеупомянутое более удобным для повторного использования, выньте массив типов файлов из функциипередать их в качестве параметра функции.См. Эту ссылку: http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

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

С этими допущениями, допустимость поля может быть простой проверкой, чтобы видеть, есть ли что-то там, что вы уже делаете.

Answer 2

$('#input_1_67').change(function(){
    if($("#input_1_67").val().length > 1)
        $("#input_17").addClass('valid');
    else
        $("#input_17").removeClass('valid');
    }
});

Кроме того, если вы используете валидатор jquery, вы можете попробовать

$('#input_1_67').change(function(){
    $("#input_17").valid();
});

Это вызовет метод валидатора (так как валидность input_17 зависит от input_1_67, он должен проверяться при каждом изменении input_1_67), и плагин автоматически устанавливает класс css.

Answer 3

Вы можете просто привязать событие change к желаемому входу, то есть:

$('#input_1_67').change(function(){
    $(this).addClass('valid');
});