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');
    }
  });
  

• textarea的

  $(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');
    }
  });
  

  

Demo