当输入字段不为空时如何立即隐藏所需的消息

Question

有一个输入字段。它是空的，单击“提交”按钮后，它会显示一条必填消息，例如“此字段是必填项”。在触摸输入并键入任何需要的消息后，就像在输入字段中键入任何内容时一样，该输入字段不再为空。但是，我无法在输入时立即隐藏该消息。再次单击提交按钮后，它已被隐藏。但是，当归档不再为空时，我需要立即隐藏。这该怎么做？我用过：

if ($('#field').val() == '') {
      $('.required').show();
  } else {
     $('.required').hide();
  }

Fiddle Work

Answer 1

更新

$('body').on('click', 'button', formSubmit);
$('#field').keyup(isFormValid);

function isFormValid() {
    if ($('#field').val() == '') {
        $('.required').show();
        return false;
    } else {
        $('.required').hide();
        return true;
    }
}
function formSubmit(){
    if(isFormValid()){
        alert('form is valid');
    }else{
        alert('form is not valid');
    }
}

更新demo 2

---

您必须使用.keyup，然后执行与单击时相同的检查。

类似的东西

$('body').on('click', 'button', formCheck);
$('#field').keyup(formCheck);

function formCheck() {
    if ($('#field').val() == '') {
        $('.required').show();
    } else {
        $('.required').hide();
    }
}

这是demo