Question

注意：这是一个jQuery编码练习，因此我不允许使用插件或其他模块。

我制作了一个简单的典型表单，并希望检查以确保输入表单字段而不是留空。如果是，则会显示相应的消息，显示错误。到目前为止，我还没有成功。

在此之后，我将添加一个功能，以确保输入有效的电子邮件。

我的表格：

<form id="myForm">
          <input type="text" placeholder="Email" id="email" name="email">
          <span class="error">Email not entered</span><br />
          <input type="password" placeholder="Password" id="pword" name="pword">
          <span class="error">Password not entered</span><br />
          <input type="text" placeholder="First Name" id="fname" name="fname">
          <span class="error">First Name not entered</span><br />
          <input type="text" placeholder="Last Name" id="lname" name="lname">
          <span class="error">Last Name not entered</span><br />
          <input type="submit" value="Submit">
    </form>

jQuery的：

$(document).ready(function(){

    // field mapping
    var form_fields = {
        'email' : 'email',
        'pword' : 'password',
        'fname' : 'first name',
        'lname' : 'last name'
    };

    // make sure form fields were entered
    $('#myForm').on('submit', function(e){
        e.preventDefault();

        for (var field in form_fields) {
            if (!$('#' + field).val()) {
                $('#' + field + ' span').addClass('.error_show');
            }
        }

    });

});

CSS：

.error {
    display: none;
}

.error_show {
    display: inline-block;
    color: red;
    margin-bottom: 1em;
}

Answer 1

除了您new Thread(() => { while (stop != true) { if (nowworker >= threads) { Thread.Sleep(50); } else { if (i <= urllist.Count - 1) { var thread = new Thread(() => { string source = GetSource(urllist[i]); SaveToFile(source, i + ".txt"); }); thread.Start(); i++; nowworker += 1; } else { stop = true; } } } }).Start();后续span以及添加element的方式之外，一切正常。您可以使用 .next 查找已验证error class的下一个element，然后我想提及以下更改完成，这是 DEMO

input

您添加课程的方式是for (var field in form_fields) { if (!$('#' + field).val()) { $('#' + field).next('.error').addClass('error_show'); //get the next element with class .error } }和此处添加类时不应该给出.addClass('.error_show');，因为它不是选择器并且是一个类名。

<强>更新

如果. selector span为child，那么'#'+field将有效，因为sibling它无法找到特定的span #' + field +' ~ span' {1}}您使用它的方式..或者您可以使用#' + field +' + span'或Arrays.stream(test) .map(String::toCharArray) .flatMap(Arrays::stream) .forEach(System.out::println);。的 DEMO HERE 即可。了解有关不同选择器的更多信息 here

jQuery表单验证未在失败时显示错误

1 个答案: