javascript - jquery 输入验证

Question

我有一个正在尝试验证的表单。我有一个字段需要确保是必需的。我对该字段有以下代码:

<p>
   <label for="lf">Name: </label>
   <input class="lf" name="name" type="text"/> 
   <span id="name_error" class="validate_error">Please enter a valid name!</span>
</p>

我希望能够首先，如果他们单击该框并且不输入任何内容，然后转到另一个框，我希望显示跨度标签，并且如果他们点击提交并且没有输入任何内容.

我有以下jquery代码，但无论如何它总是显示span标签。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

    <!--Name can't be blank-->
    $('#name').on('input', function() {
        var input=$(this);
        var is_name=input.val();
            if(is_name){
                $("#name_error").hide();
            }else{
                $("#name_error").show();
            }
    });

});
</script>

Answer 1

您使用 ID 进行定位，但该元素没有 ID。

在输入元素上设置id="name"

<input class="lf" id="name" name="name" type="text"/>

或在定位时使用另一个选择器input[name="name"]。

$('input[name="name"]').on('input', function() {

(此外，该 html 注释不应存在，或者开头应有一个 //)