Попытка остановить функцию при возврате false

Question

Я использую плагин Validator jQuery с jQuery 1.6.2.

Я не проверяю <form>, а только одиночное поле.Это связано с тем, что на этой странице есть несколько уникальных <form>, а значение из этого одного поля используется совместно, копируется и т. Д.

Оба обработчика success и invalidHandler работают корректно на основепо моим правилам.

var myValidate = function() {
    $("#field").validate({

        // rules, message, etc.

       success: function(error){
          //  doing all kinds of things if this validates
          return true;
       },
       invalidHandler: function(form, validator) {
          //  what to do if this fails validation
          return false;
       },
    });         
};

И у меня есть несколько других функций, не связанных друг с другом, которые просто вызывают функцию myValidate, описанную выше ...

$('#myElement1').click(function() {
    myValidate;  // call to "myValidate" to validate field
    // doing stuff here only if "myValidate" returns true.
});

$('#myElement2').click(function() {
    myValidate;  // call to "myValidate" to validate field
    // only do other things here if "myValidate" returns true.
});

$('#myElement3').click(function() {
    myValidate;  // call to "myValidate" to validate field
    // and different things to do here only if "myValidate" returns true.
});

Выше приведено очень простоепредставление о том, что я делаю, и нет никаких ошибок.

Все это работает, кроме одной вещи ... мой мозг.Я не могу понять, как остановить / продолжить поток дополнительных функций, которые вызывают myValidate на основе return true или false в пределах myValidate.

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

Может кто-нибудь любезно объяснить, что я сделал неправильно?

Answer 1

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

$('#myElement1').click(function() {
  myValidate(function(result) {
    if (result === true) {
      //must be valid!
    } else {
      //invalid
    }
  }
});

Вот как я бы структурировал функцию myValidate.

var myValidate = function(callback) {
    $("#field").validate({

        // rules, message, etc.

       success: function(error){
          //  doing all kinds of things if this validates
          return callback(true);
       },
       invalidHandler: function(form, validator) {
          //  what to do if this fails validation
          return callback(false);
       }
    });         
};

Answer 2

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

Side Issue # 1 - Я пытался проверить это текстовое поле «на размытие», поэтому у меня было целое отдельное событие и функция, что привело к моему нестандартному подходу и глупому вопросу. Все ненужно. Все, что мне было нужно, это onkeyup, оно проверяется при вводе текста. Форма "отправить" не требуется.

onkeyup: function(element) { this.element(element); }

Side Issue # 2 - Я искал что-то, что было противоположно обработчику success:, что-то, что срабатывает всякий раз, когда проверка не удалась. Однако invalidHandler: срабатывает только при отправке form. Несмотря на то, что я в конечном итоге помещаю свое поле в общую форму, форма не нуждается в «подтверждении» для проверки. Я наконец понял, что обработчик errorPlacement: запускается всякий раз, когда форма не проходит проверку, в точности противоположную обработчику success ... это прекрасно. Вам не нужно ничего «подтверждать» для проверки, и текст проверяется по мере ввода ... он встроен в модуль.

Side Issue # 3 - Эта проблема касалась только публикации SO, а не моего проекта. Целью проверки должно быть поле <form>, , а не и <input>. Я не только не упомянул этот факт, но и сказал обратное. Так и должно быть, $("#form").validate();

Issue # 4 - И, очевидно, я неправильно создавал и ссылался на функцию myValidate. Я удалил все это и просто оставил $('#form').validate(); сам по себе. Теперь, когда у меня установлен / снят флаг для допустимого / недействительного Теперь, когда я использую метод .valid(), я могу выполнять другие свои функции, используя простое «if / then».

Решение:

Итак, изначально, чтобы решить эту проблему, я в конечном итоге использовал переменную flag с некоторыми утверждениями «если / тогда», которой я хотел избежать, когда писал вопрос… по крайней мере, так я думал время. Может быть, есть более элегантное решение ...

РЕДАКТИРОВАТЬ: Да, есть более элегантное решение ...

Изучив ответ Грега, я выясняю, как использовать метод .valid() вместо ...

предыдущий jsFiddle с использованием переменной флага

новый jsFiddle с использованием метода .valid(), как показано ниже

$("#form").validate({
    onkeyup: function(element) { this.element(element); },
    validClass: 'valid',
    rules: {
        comments: {
            required: false,
            maxlength: 180
        }
    },
    success: function(error){
        // stuff to do when it's valid (does not require form submit)
    },
    errorPlacement: function(error, element){
        // stuff to do when it's not valid (does not require form submit)
    }
});

А затем несколько похожих функций присоединяются к различным другим событиям. «If / then» проверяет на наличие флага проверки метода .valid() перед выполнением чего-либо.

$('#myElement1').click(function() {
    if($("#form").valid()){ // if validated
        // doing stuff here only if it was already validated
    };
});

$('#myElement2').click(function() {
    if($("#form").valid()){ // if validated
        // doing stuff here only if it was already validated
    };
});

Так почему я все это делаю?

Как указано в моем исходном вопросе, я делюсь содержанием этого одного текстового поля с несколькими другими формами на странице. Они тоже должны быть проверены, но на этот раз я использую submitHandler:, так как эти другие формы действительно "отправлены".

Эта методология позволяет мне "сортировать" проверку правильности одиночного поля (в #form) в рамках проверки других отправляемых форм (#formTWO & #formThree) ...

$("#formTWO").validate({
    // rules for #formTWO
    submitHandler: function(form) {
        copyText();  // copy text from #form into #formTWO hidden field before submission
        if($("#form").valid()){ // only allow #formTWO to submit if #form is valid
            form.submit();
        }
    }
});

$("#formThree").validate({
    // rules for #formThree
    submitHandler: function(form) {
        copyText();  // copy text from #form into #formThree hidden field before submission
        if($("#form").valid()){ // only allow #formThree to submit if #form is valid
            form.submit();
        }
    }
});

Answer 3

Попробуйте немного реструктурировать свой код. Вам нужно вызвать метод $().valid(), чтобы определить, является ли он действительным, а не из обработчиков внутри параметров .validate().

Также обратите внимание, что я не могу заставить его работать без упаковки ввода в тег <form>.

Вот моя попытка реструктурировать его, продемонстрированная в this jsFiddle :

$(function() {
    // set up the validation
    $("#field").validate();

    // define your click handlers
    $('#myElement1').click(function() {
        if (myValidate()) {
            alert('Click 1: Validate passed.');
        } else {
            alert('Click 1: Validate failed.');
        }
    });

    $('#myElement2').click(function() {
        if (myValidate()) {
            alert('Click 2: Validate passed.');
        } else {
            alert('Click 2: Validate failed.');
        }
    });

    $('#myElement3').click(function() {
        if (myValidate()) {
            alert('Click 3: Validate passed.');
        } else {
            alert('Click 3: Validate failed.');
        }
    });
});

// put your function down here
function myValidate() {
    var isValid = $('#field').valid();
    if (isValid) {
            //  doing all kinds of things if this validates
            $('#feedback').text('Validation passed.');
    } else {
            //  what to do if this fails validation
            $('#feedback').text('Validation failed.');        
    }
    return isValid;
}

Дайте мне знать, если у вас есть какие-либо вопросы.

Answer 4

myValidate; не звонит myValidate.Он просто ссылается на него.

Требуется оператор if.

if (myValidate()) {
    // Valid
}

if (!myValidate()) {
    // Not valid
}

Это базовый JavaScript (базовый программирование );если вы не знакомы с этим, попробуйте больше узнать о программировании и JavaScript.

Вы также можете передавать аргументы, чтобы он работал с несколькими формами.