Не регистрируется массив ошибок формы Javascript - PullRequest
Новая
       1

Не регистрируется массив ошибок формы Javascript

1 голос
/ 23 сентября 2011

Я сделал скрипку, чтобы вы могли проверить это сами:

http://jsfiddle.net/ProjectV1/9XQtb/

Javascript

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

Фактическая проблема, с которой я столкнулся, заключается в том, что сама форма работает и массив ошибок также работает, но оператор if не работает для обоих подтверждения входных данных.

Попробуйте сами с скрипкой (я добавил результат переменной error для этого ввода рядом с самим вводом для простоты понимания);

ВОССТАНОВИТЬ ПРОБЛЕМУ

Чтобы передать ошибку == false, адрес электронной почты должен быть действительным, пароль длиной более 6 символов и имя пользователя длиной более 3 символов.

В качестве примера я указал форму в Google.

Форма работает для неподтвержденных вводов

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

Форма не работает для подтверждения ввода

Но если вы заполните все поля формы так, чтобы один или оба из подтверждающих входов содержали ошибку, то форма все равно будет отправлена, даже если ошибки для этого поля ввода вернут false.

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

Почему это происходит и как я могу предотвратить это? Имеет ли это какое-то отношение к тому факту, что входные данные подтверждения вложены в операторы if else.

Код Javascript 

$(document).ready(function() {

$('#joinForm input').blur(function() {
    var id = $(this).attr('id');
    joinAjax (id);
});

});

var errors = new Array();
errors[email] = null;
errors[cemail] = null;
errors[password] = null;
errors[cpassword] = null;
errors[username] = null;

function joinAjax (id) {

var val = $('#' + id).val();

if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (val == '') {
        errors[email] = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>');
    }

    else if (reg.test(val) == false) {
        errors[email] = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>');
    }

    else {
        errors[email] = false;
        $('#' + id).after('<div id="emailMsg" class="success">' + errors[email] + '</div>');
    }

    joinAjax('#cemail');

}

if (id == 'cemail') {

    $('#cemailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var email = $('#email').val();

    if (reg.test(email) == true) {

        if (val != email) {
            errors[cemail] = true;
            $('#' + id).after('<div id="cemailMsg" class="error">' + errors[cemail] + '</div>');
        }

        else {
            errors[cemail] = false;
            $('#' + id).after('<div id="cemailMsg" class="success">' + errors[cemail] + '</div>');
        }

    }

    else {
        $('#cemail').val('');
    }
}

if (id == 'password') {

    $('#passwordMsg').hide();

    if (val == '') {
        errors[password] = true;
        $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>');
    }

    else if (val.length < 6) {
        errors[password] = true;
        $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>');
    }

    else {
        errors[password] = false;
        $('#' + id).after('<div id="passwordMsg" class="success">' + errors[password] + '</div>');
    }

    joinAjax('#cpassword');
}

if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();

    if (password.length >= 6) {

        if (val != password) {
            errors[cpassword] = true;
            $('#' + id).after('<div id="cpasswordMsg" class="error">' + errors[cpassword] + '</div>');
        }

        else {
            errors[cpassword] = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">' + errors[cpassword] + '</div>');
        }
    }

    else {
        $('#cpassword').val('');
    }        
}

if (id == 'username') {
    $('#usernameMsg').hide();

    if (val == '') {
        errors[username] = true;
        $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>');
    }

    else if (val.length < 3) {
        errors[username] = true;
        $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>');
    }

    else {
        errors[username] = false;
        $('#' + id).after('<div id="usernameMsg" class="success">' + errors[username] + '</div>');
    }
}

$('#joinForm').submit(function(event){
    if ((errors[email] == true) || (errors[cemail] == true) || (errors[password] == true) || (errors[cpassword] == true) || (errors[username] == true)) {
        event.preventDefault();
    }
    return true;
});

Рабочий пример

http://jsfiddle.net/ProjectV1/9XQtb/3/

ИЗМЕНЕНИЯ ПОСЛЕ РЕКОМЕНДАЦИИ POINTYS 

var errors = {};
errors.email = true;
errors.cemail = true;
errors.password = true;
errors.cpassword = true;
errors.username = true;

function joinAjax (id) {

var val = $('#' + id).val();

if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (val == '') {

        $('#' + id).after('<div id="emailMsg" class="error">Enter your email</div>');
    }

    else if (reg.test(val) == false) {

        $('#' + id).after('<div id="emailMsg" class="error">Email invalid</div>');
    }

    else {

        errors.email = false;
        $('#' + id).after('<div id="emailMsg" class="success">Email OK</div>');
    }

    joinAjax('cemail');
}

if (id == 'cemail') {

    $('#cemailMsg').hide();
var email = $('#email').val();

    if (errors.email == false) {

        if (val != email) {

            $('#' + id).after('<div id="cemailMsg" class="error">Emails do not match</div>');
        }

        else {

            errors.cemail = false;
            $('#' + id).after('<div id="cemailMsg" class="success">Success</div>');
        }
    }

    else {

        $('#cemail').val('');
    }
}

if (id == 'password') {

    $('#passwordMsg').hide();

    if (val == '') {

        $('#' + id).after('<div id="passwordMsg" class="error">Enter a password</div>');
    }

    else if (val.length < 6) {

        $('#' + id).after('<div id="passwordMsg" class="error">Minimum length of 6</div>');
    }

    else {

        errors.password = false;
        $('#' + id).after('<div id="passwordMsg" class="success">Password OK</div>');
    }

    joinAjax('cpassword');
}

if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();

    if (errors.password == false) {

        if (val != password) {

            $('#' + id).after('<div id="cpasswordMsg" class="error">Passwords do not match</div>');
        }

        else {

            errors.cpassword = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">Success</div>');
        }
    }

    else {

        $('#cpassword').val('');
    }        
}

if (id == 'username') {

    $('#usernameMsg').hide();

    if (val == '') {

        $('#' + id).after('<div id="usernameMsg" class="error">Enter a username</div>');
    }

    else if (val.length < 3) {

        $('#' + id).after('<div id="usernameMsg" class="error">Minimum length is 3</div>');
    }

    else {

        errors.username = false;
        $('#' + id).after('<div id="usernameMsg" class="success">Username available</div>');
    }
}

$('#joinForm').submit(function(event){

    if ((errors.email == true) || (errors.cemail == true) || (errors.password == true) || (errors.cpassword == true) || (errors.username == true)) {
        event.preventDefault();
    }

    return true;
});
}

Я обратился ко всем советам pointys и добавил несколько своих изменений.

  1. Я изменил значения ошибок по умолчанию на true и изменил их, только если им нужно, чтобы они были false. Сделав так, чтобы мне не пришлось менять значение true на ошибку.

  2. Изменены значения внутри div для отображения сообщений об ошибках.

  3. Вместо проверки подтверждения, если исходный ввод для подтверждения действителен для регулярного выражения или длины, я просто проверяю, было ли значение ошибки ложным или нет.

Спасибо всем за вашу помощь, я надеюсь, что люди могут извлечь из этого уроки.

1 Ответ

1 голос
/ 23 сентября 2011

Этот материал здесь неправильный: 

errors[email] = null;
errors[cemail] = null;
errors[password] = null;
errors[cpassword] = null;
errors[username] = null;

Вместо этого вы хотите: 

errors.email = null;
errors.cemail = null;
errors.password = null;
errors.cpassword = null;
errors.username = null;

То же самое для всех других ссылок. Первая форма (неправильная форма в настоящее время в вашем коде) будет работать, если «email», «cemail», «пароль» и т. Д. Являются переменными с некоторыми значениями, которые будут использоваться в качестве ключей. Как это, они не определены в этой точке. Вторая форма использует эти имена в качестве имен свойств.

Вы также можете выразить имена свойств в виде строк и использовать скобки: 

errors["email"] = null;
errors["cemail"] = null;
errors["password"] = null;
errors["cpassword"] = null;
errors['username'] = null;

Инициализация этих свойств в null не является обязательной в любом случае, на самом деле, если только ваш код не будет проводить различие между отсутствующим свойством и присутствующим свойством, но с нулевым значением. Однако позже в вашем коде все становится странным, потому что вы фактически определяете переменные с этими именами, а затем продолжаете использовать их в качестве косвенных ссылок на имена свойств. Возможно, вы захотите проверить, как работает синтаксис ссылки на свойства объекта в JavaScript. Кроме того, в любом случае нет необходимости в массиве, поскольку вы не используете числовые индексы. Это должен быть просто объект: 

var errors = {};

edit Просматривая jsfiddle, возникают другие проблемы. Существуют рекурсивные вызовы функции "joinAjax", которые не имеют смысла; Я даже не могу сказать, что они должны делать. Затем, когда вы обнаруживаете ошибки, вы устанавливаете флаг ошибки на «true», но затем также используете это значение непосредственно в отображаемом сообщении об ошибке (ниже я исправил неправильные ссылки на свойства): 

        errors.email = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors.email + '</div>');

Я не знаю, что вы хотите, чтобы это произошло, но мне это кажется странным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...