включить кнопку отправки после подтверждения формы в плагине проверки jquery [duplicate]

Это очень распространенная проблема, с которой мы сталкиваемся, борясь с «таинствами» JavaScript.

Давайте начнем с простой функции JavaScript:

function foo(){
// do something 
 return 'wohoo';
}

let bar = foo(); // bar is 'wohoo' here

Это простой синхронный вызов функции (где каждая строка кода выполняется одна за другой в последовательность), и результат будет таким же, как ожидалось.

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

function foo(){
 setTimeout( ()=>{
   return 'wohoo';
  }, 1000 )
}

let bar = foo() // bar is undefined here

Итак, вы идете, эта задержка просто сломала функциональность, которую мы ожидали! Но что именно произошло? Ну, на самом деле это довольно логично, если вы посмотрите на код. функция foo() после выполнения ничего не возвращает (таким образом, возвращаемое значение равно undefined), но оно запускает таймер, который выполняет функцию после 1s, чтобы вернуть «wohoo». Но, как вы можете видеть, значение, присвоенное бару, является немедленно возвращенным материалом из foo (), а не что-либо еще, что приходит позже.

Итак, как мы решаем эту проблему?

Давайте попросим нашу функцию для ОБЕЩАНИЯ. Обещание действительно о том, что это означает: это означает, что функция гарантирует, что вы предоставите любой результат, который он получит в будущем. поэтому давайте посмотрим на это в нашей маленькой проблеме выше:

function foo(){
   return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){ 
      // promise is RESOLVED , when exececution reaches this line of code
       resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar ; 
foo().then( res => {
 bar = res;
 console.log(bar) // will print 'wohoo'
});

Таким образом, резюме - для решения асинхронных функций, таких как вызовы на основе ajax и т. д., вы можете использовать обещание resolve значение (которое вы намерены вернуть). Таким образом, короче говоря, вы разрешаете значение вместо возврата в асинхронных функциях.

5
задан Sparky 20 November 2014 в 22:25
поделиться

3 ответа

Вы просто создали функцию обработчика blur (или даже keyup) для переключения кнопки на основе действительности формы. Используйте метод плагина .valid() для проверки формы.

$('input').on('blur', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

DEMO: http://jsfiddle.net/sd88wucL/


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

$('input').on('blur keyup', function() {
    if ($("#myform").valid()) {
        $('#submit').prop('disabled', false);  
    } else {
        $('#submit').prop('disabled', 'disabled');
    }
});

DEMO 2: http://jsfiddle.net/sd88wucL / 1 /

Источник: https://stackoverflow.com/a/21956309/594235

14
ответ дан Community 26 August 2018 в 12:48
поделиться

Код, приведенный ниже:

$('#formId').on('blur keyup change', 'input', function(event) {
  validateForm('#formId');
});

function validateForm(id) {
  var valid = $(id).validate().checkForm();
    if (valid) {
      $('.form-save').prop('disabled', false);
        $('.form-save').removeClass('isDisabled');
    } else {
      $('.form-save').prop('disabled', 'disabled');
      $('.form-save').addClass('isDisabled');
    }
}

// Run once, so subsequent input will be show error message upon validation
validateForm('#formId');

Он использует checkForm() вместо form(), а моя кнопка отключения имеет класс form-save

Он основан на ответе @ Sparky

Существует проблема , поданная на jQuery-validation git repo .

0
ответ дан Anima-t3d 26 August 2018 в 12:48
поделиться
$('form').find(':input').each(function(index, value){
    //action for every element
    $(value);
});

В этом случае вы можете сделать это следующим образом: (но мне не нравится это решение)

var areSomeFieldsEmpty = false;
$('form').find(':input').each(function(i, v){
  if ($(v).val().length <= 0){
     areSomeFieldsEmpty = true;
  }
});

if (!areSomeFieldsEmpty){
  //unlock form   
}

http://jsfiddle.net/89y26/335/

0
ответ дан Foxbond 26 August 2018 в 12:48
поделиться
Другие вопросы по тегам:

Похожие вопросы: