Jquery Mobile的验证样式

巴兹

在这里,我正在验证我的jquery-mobile形式的字段:

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

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

显然,我不想使用警报框来执行此操作。我该如何向用户传达该字段无效?我希望有一个适用于所有典型移动平台的解决方案。

奥马尔

创建一个自定义类。

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

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery Mobile Panel样式问题

来自分类Dev

Jquery:如何插入Jquery Mobile样式的输入?

来自分类Dev

jQuery Mobile之后的文本框样式

来自分类Dev

自定义样式jQuery Mobile + Phonegap

来自分类Dev

jQuery Mobile样式:延迟初始化?

来自分类Dev

jQuery Mobile滑动以单页样式导航

来自分类Dev

jQuery Mobile Page Transition删除CSS样式

来自分类Dev

jQuery Mobile样式不起作用

来自分类Dev

jQuery验证消息显示在jQuery Mobile中的文本输入内

来自分类Dev

jQuery mobile无法与Jquery验证引擎一起使用

来自分类Dev

jQuery验证消息显示在jQuery Mobile中的文本输入内

来自分类Dev

在jQuery mobile 1.4.0中更改单选按钮的样式

来自分类Dev

如何在jQuery Mobile中将样式更新为ListView?

来自分类Dev

无法在jquery mobile中删除输入字段的样式

来自分类Dev

如何在jQuery Mobile中设置“列表项>链接”的样式

来自分类Dev

如何在整个div内容中禁用jquery mobile的样式?

来自分类Dev

如何在jQuery Mobile中将样式更新为ListView?

来自分类Dev

无法在jquery mobile中删除输入字段的样式

来自分类Dev

jQuery Mobile样式保留到我链接到的页面

来自分类Dev

Quora在Jquery Mobile中设置了“添加内容”图标的样式

来自分类Dev

将JQuery Mobile的样式应用于功能

来自分类Dev

如何在jquery mobile中设置“列表项>链接”的样式

来自分类Dev

jQuery Mobile-文本输入不适用于样式

来自分类Dev

jQuery Mobile在下一页上保持样式

来自分类Dev

jQuery Mobile自定义样式的水平响应菜单

来自分类Dev

jQuery表单验证-phoneUS和默认消息样式

来自分类Dev

在 jquery 验证期间向非输入元素添加样式

来自分类Dev

设置Mobile导航栏的样式是否需要JQuery Mobile的CSS文件?

来自分类Dev

jQuery验证插件-如何以不同的方式设置1验证消息的样式

Related 相关文章

  1. 1

    jQuery Mobile Panel样式问题

  2. 2

    Jquery:如何插入Jquery Mobile样式的输入?

  3. 3

    jQuery Mobile之后的文本框样式

  4. 4

    自定义样式jQuery Mobile + Phonegap

  5. 5

    jQuery Mobile样式:延迟初始化?

  6. 6

    jQuery Mobile滑动以单页样式导航

  7. 7

    jQuery Mobile Page Transition删除CSS样式

  8. 8

    jQuery Mobile样式不起作用

  9. 9

    jQuery验证消息显示在jQuery Mobile中的文本输入内

  10. 10

    jQuery mobile无法与Jquery验证引擎一起使用

  11. 11

    jQuery验证消息显示在jQuery Mobile中的文本输入内

  12. 12

    在jQuery mobile 1.4.0中更改单选按钮的样式

  13. 13

    如何在jQuery Mobile中将样式更新为ListView?

  14. 14

    无法在jquery mobile中删除输入字段的样式

  15. 15

    如何在jQuery Mobile中设置“列表项>链接”的样式

  16. 16

    如何在整个div内容中禁用jquery mobile的样式?

  17. 17

    如何在jQuery Mobile中将样式更新为ListView?

  18. 18

    无法在jquery mobile中删除输入字段的样式

  19. 19

    jQuery Mobile样式保留到我链接到的页面

  20. 20

    Quora在Jquery Mobile中设置了“添加内容”图标的样式

  21. 21

    将JQuery Mobile的样式应用于功能

  22. 22

    如何在jquery mobile中设置“列表项>链接”的样式

  23. 23

    jQuery Mobile-文本输入不适用于样式

  24. 24

    jQuery Mobile在下一页上保持样式

  25. 25

    jQuery Mobile自定义样式的水平响应菜单

  26. 26

    jQuery表单验证-phoneUS和默认消息样式

  27. 27

    在 jquery 验证期间向非输入元素添加样式

  28. 28

    设置Mobile导航栏的样式是否需要JQuery Mobile的CSS文件?

  29. 29

    jQuery验证插件-如何以不同的方式设置1验证消息的样式

热门标签

归档