Javascript проверить несколько входов на пустое, вернуть одно значение

Question

Хорошо, ребята, прежде чем я продолжу, я знаю, что то, что я хочу сделать, можно сделать с помощью множества переменных и т. Д., Но я должен представить, что то, что я делаю, можно сделать гораздо проще. Итак, у меня есть форма с 4 полями, и я хочу проверить, не заполнены ли какие-либо из четырех. Затем, к каждому пустому, я хочу добавить класс и использовать jQuery UI-эффект «встряхнуть» для уведомления. Затем я хочу получить истинный или ложный ответ, истина в том, что все не пустые, и ложь в том, что любой из 4 пуст. так что у меня есть .. HTML ...

<form name = "regin" id = "regin">
  <div id = "form_hold">
  <div><label>Username</label><input type="text" id = "Rusername" name = "Rusername" /><div class = 'verdiv' id = 'rvuname'></div></div>
  <div><label>Email</label><input type="text" id = "Remail" name = "Remail" /><div class = 'verdiv' id = 'rvemail'></div></div>
  <div><label>Password</label><input type="password" id = "Rpassword" name = "Rpassword" /><div class = 'verdiv' id = 'rvpass1'></div></div>
  <div><label>Confirm</label><input type="password" id = "Rpassword2" name = "Rpassword2" /><div class = 'verdiv' id = 'rvpass2'></div></div>
  </div>
  <button type="button" class = "thoughtbot" id = "registerButton">Register</button>
  </form>

и javascript / jquery ...

if($username == ''){
    $('#Rusername').parent().find('.verdiv').addClass('error');
    $('#Rusername').parent().effect("shake", { times:3 }, 50);
}
if($email == ''){
    $('#Remail').parent().find('.verdiv').addClass('error');
    $('#Remail').parent().effect("shake", { times:3 }, 50);
}   
if($password == ''){
    $('#Rpassword').parent().find('.verdiv').addClass('error');
    $('#Rpassword').parent().effect("shake", { times:3 }, 50);
}
if($checkval == ''){
    $('#Rpassword2').parent().find('.verdiv').addClass('error');
    $('#Rpassword2').parent().effect("shake", { times:3 }, 50); 
}

Теперь есть ли одна функция верхнего уровня, чтобы «проверить» каждое из этих утверждений, чтобы убедиться, что они истинны? Спасибо.

Answer 1

Вы можете зациклить:

$('#Rusername, #Remail, #Rpassword, #Rpassword2').each(function() {
  if ($(this).val() == '') {
    $(this).parent().effect('shake', {times: 3}, 50).find('.verdiv').addClass('error');
  }
});

Но в идеале я бы добавил класс к их родительскому элементу и упростил бы селектор до этого:

$('.parent_class input');

РЕДАКТИРОВАТЬ: код не был завершен - я удалил левую фигурную скобку.

Answer 2

Как насчет:

$("form input:text").each(function() {
    if ($(this).val() == "") {
       $(this).parents().find('.verdiv').addClass('error');
       $(this).parent().effect("shake", { times:3 }, 50);
    }
});

- РЕДАКТИРОВАТЬ -

Чтобы ответить на дополнительный вопрос, вы можете добавить атрибут к полям, например, data-type = "email",и т. д. затем измените javascript следующим образом:

$("form input:text").each(function() {
    var isValid = new Function("value", "validate" + $(this).attr("data-type") + "(value);");
    if ($(this).val() == "" && !isValid($(this).val())) {
       $(this).parents().find('.verdiv').addClass('error');
       $(this).parent().effect("shake", { times:3 }, 50);
    }
});

Вам необходимо добавить функции для «validateemail», «validatetext» и т. д., которые возвращают true для допустимого поля и false для недействительного поля.

Answer 3

Немного сложно и грязно, но может работать.

var items = { 'username':'Rusername', 'email':'Remail', 'password':'Rpassword', 'checkval':'Rpassword2' };
$.each( items, function( val, id ) {
    eval('if($'+val+' == \'\') { ....copy your codes here... }');
});

Answer 4

    $('input [type=text]').each(function(event){
    if($(this).val()=='')
    {
    //Do here shaking and error showing.
    }
    });

Answer 5

Поместите один и тот же класс в каждое из полей ввода для проверки, например validatefield.

Тогда при условии, что $username и $email являются значениями каждого поля ввода, это должно работать:

var valid = true;
$(".validatefield").each(function() {
    if ($(this).val() == "") {
        $(this).parent().find('.verdiv').addClass('error');
        $(this).parent().effect("shake", { times:3 }, 50);
        valid = false;
    }
});

Answer 6

Вы можете добавить атрибут data-validate=true к каждому входу, а затем сделать это так:

function validate() {
var valid = true;
$("[data-validate]").each(function () {
    var el = $(this);
    if(el.val() == "") {
        el.parent().find('.verdiv').addClass('error');
        el.parent().effect("shake", { times:3 }, 50);
        valid = false;
    }
});

return valid
}