jquery-mobile - Jquery Mobile 的验证样式

Question

在这里，我正在验证我的 jquery-mobile 表单中的一个字段：

$("#contactForm").submit(function (e) 
{
    e.preventDefault();

    if($("#name").val() == '')
    {
        alert("Fill in name");
    }
}); 

显然我不想使用警告框来做到这一点。我如何向用户传达该字段无效？我想要一个适用于所有典型移动平台的解决方案。

Answer 1

创建一个自定义类。

.required {
  border: 1px solid red;
}

将其添加/删除到字段：

• 文字输入

  $(document).on('blur', 'textarea, input', function (e) {
    if (!$(this).val() && e.target.localName == 'input') {
      $(this).closest('div').addClass('required');
    }
    if (!$(this).val() && e.target.localName == 'textarea') {
      $(this).addClass('required');
    }
  });
  

• 文本区域

  $(document).on('focus', 'textarea, input', function (e) {
    if (e.target.localName == 'input') {
      $(this).closest('div').removeClass('required');
    }
    if (e.target.localName == 'textarea') {
      $(this).removeClass('required');
    }
  });
  

演示