Question

我的表单中有一些必填字段，我用class="required"标记了它们。我正在编写下面的jquery来验证这个表单，但它不会发生。我想要么是在搞乱调用这两个函数，要么我没有通过$(this)获得正确的元素。

<script type="text/javascript">
    function validatemyForm() {
        $('.required').each(function() {
            if($(this).val() == "" || $(this).replace(/\s/g, '').length == 0)
            {
                $(this).insertAfter('<span>This is a Required Filed</span>');
                return false;
            }
            else {
                $(this).remove();
            }
        })
        return true;
    }
</script>

我从onsubmit事件处理程序<form id="myform" onsubmit ="return validatemyForm();">调用表单。我错误地使用了jQuery的each和this吗？

Answer 1

许多事情：

您可以在字符串上使用replace，同时在jQuery对象上使用它。没有$(this).replace。如果要检查空格，则需要值，即$(this).val().replace。
您使用$(this).insertAfter这意味着在跨度之后插入输入元素。 $(this).remove只是删除了输入元素，而不是我认为的那样。
return false中的each()，但这并未在validatemyForm函数中返回该值。在该功能中，您始终return true。

我将其更改为此以使其正常工作：http://jsfiddle.net/DaDQT/6/。

Answer 2

您的函数validatemyForm始终返回true。您所拥有的return false位于传递给each的函数内部。 validatemyForm此时并未停止。

以下内容应该按预期工作（未经测试的代码）：

<script type="text/javascript">
    function validatemyForm() {
        var ok = true;
        $('.required').each(function() {
            if($(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0)
            {
                $(this).insertAfter('<span>This is a Required Field</span>');
                ok = false;
            }
            else {
                $(this).remove();
            }
        })
        return ok;
    }
</script>

表单验证不会发生

2 个答案: