Question

我一直在不停地编写一个简单的员工入职表格，虽然现在我的工作令人满意，但我想我应该对社区进行民意调查，看看是否还有几个烦人的问题可能有答案。

首先，让我从布局基本设置开始。我有一个看起来像这样的表格：

生成这种形式的HTML的基本结构如下（很抱歉，图片，但我不想过多地弄乱细节）：

如您所见，这是使用其默认的16列网格的基本语义UI。页面页脚中突出显示的行包含以下javascript验证代码：

      //- show/hide password when button is clicked
      $('#show-hide').click(function() {
        var x = $('#p1');
        var y = $('#p2');
        console.log(x.attr('type'));
        console.log(y.attr('type'));
        if (x.attr('type') === "password") {
          x.attr('type', 'text');
          y.attr('type', 'text');
        } else {
          x.attr('type', 'password');
          y.attr('type', 'password');
        }
      });

      //- form field validation rules (see semantic-ui documentation)
      $('#new-password-form').form({
        /* inline: true, */
        on: 'blur',
        fields: {
          p1: ['empty', 'regExp[/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/]'],
          p2: 'match[password]',
          sq: 'empty',
        },
        onSuccess: function(event, fields){
          alert('form validation succeeded! ' + Date.now());
          //AJAX call goes here.
          return false;
        },//onSuccess:
        /* onFailure: function(formErrors, fields){
        },//onFailure */
      });

      //- show/hide error message divs as appropriate on form field focus changes
      $('input, select, textarea').focus(function(){
        if ($("#p1").parent().hasClass('error')){ 
          $('#p1_error').removeClass('hidden');
        }else{
          $('#p1_error').addClass('hidden');
        }            
        if ($("#p2").parent().hasClass('error')) {
          $('#p2_error').removeClass('hidden');
        }else{
          $('#p2_error').addClass('hidden');
        }
        if ($("#sq").parent().hasClass('error')) {
          $('#sc_error').removeClass('hidden');
        }else{
          $('#sc_error').addClass('hidden');
        }  
      });

我使用语义扩展的验证语法（包括错误消息）在一处实现了所有内容。但是我最终放弃了，转而支持自定义隐藏的浮动div（使用语义小部件），我根据验证规则的通过/失败（父div上存在/不存在错误类）取消了上面的javascript逻辑的隐藏）。

我的问题

如何获取内置的验证代码以生成如下所示的漂亮的内联错误消息（请参见下面的图片和说明）
验证内联时如何控制错误消息的放置？我放弃内置的浮动错误div的主要原因是因为我无法让它们以正确的方式在正确的位置显示，而且似乎没有文档可以在任何地方找到。

我当前的实施情况 实施后，每次焦点更改在输入字段上时，我的表单都会重新生效。根据每个字段的验证状态显示或删除错误消息。每次焦点更改时都会检查所有表单字段。因为我使用的是浮动div来显示错误消息，所以当显示一个div并保留外观时，不会再创建/需要其他空间。

除了上述问题外，令我困扰的还有一件事，就是我必须在错误div上使用内联样式覆盖 left 属性，才能使其正确显示。例如：

<div class="ui red basic floating pointing below label" id="p1_error" style="left: unset;">
  Minimum length of 8; including upper and lower case characters, digit(s), and symbol(s).
</div>

默认的CSS（左：100％；）将浮动错误div置于右侧，这对我来说似乎很奇怪。看起来就是这样。

丑陋。如果那里有人可以向我们展示如何通过内置错误消息来实现相同的行为，则代码将更加优雅和高效。理想情况下，我们将能够指定错误的浮动位置（左，右，上，下），以及错误的指向方式。预先感谢。

语义UI表单验证（仅适用于AJAX）

0 个答案: