Question

朋友我是javascript的新手，我正在尝试编写一个脚本来验证整个表单，只要输入字段值被输入fiels更改为必需的数据属性。的 HTML

<form>
<input type="text" name="FirstName" class="inputField" data-required="true"></input>
<input type="text" name="MiddleName" class="inputField"></input>
<input type="text" name="LastName" class="inputField" data-required="true"></input>
</form>

SCRIPT

var field, required, isValid, fieldVal;
function validatedForm() {
field = document.querySelectorAll('.inputField');
document.getElementById("submitButton").disabled = true;
var isValid = true;
for(var i=0; i < field.length; i++){
    required = field[i].dataset.required;       
    if(required){
        field[i].addEventListener('blur', function(e){
            fieldVal = this.value;
            if(fieldVal == ''){
                isValid = false;
            }
            checkSubmitBtn();
        }, true);
    }

}

function checkSubmitBtn() {
    if(isValid = true) {
        console.log(isValid);
        document.getElementById("submitButton").disabled = false;
    }
}
}
window.addEventListener("load", validatedForm);

问题1： isValid 未更新，因此即使输入字段上的空模糊也会使按钮禁用为假。

问题2： 如果页面上有多个表单，那么如何只验证所需的表单..就像在jQuery中一样，我们最后添加一个脚本标签来根据它初始化脚本。

问题3： 有没有办法在没有GetElementID的情况下更改按钮的禁用状态...我的意思是，如果可以根据脚本假设工作的页面上的特定表单的提交按钮来管理它。

任何帮助都将受到高度赞赏。提前谢谢。

Answer 1

这里有很多事情要发生。首先，您的checkSubmitBtn函数在=语句中使用了一个if运算符。这实际上不会检查变量，而是将变量设置为该值。这是固定功能：

function checkSubmitBtn() {
    if (isValid == true) {
        document.getElementById("submitButton").disabled = false;
    }
}

您提到不想使用getElementById。有几种方法可以解决这个问题。一种方法是调用函数一次并将其存储在变量中以便稍后使用，如下所示：

var button = document.getElementById("submitButton");

...

function checkSubmitBtn() {
    button.disabled = !isValid;
}

另一种方法是使用jQuery。它在技术上仍然在后端调用getElementById，但代码更简单。如果你想避免这种情况，你仍然可以将它与我上面描述的技术结合起来。

$("#submitButton").attr("disabled", !isValid);

我还想指出，您的代码并未考虑表单从无效（起始点）变为有效并再次变为无效的情况。假设用户输入所有字段，然后退回所有字段。你的代码将崩溃。

最后，不应关闭您的<input> HTML代码。有certain tags被视为“自我关闭”，即您不必编写结束标记</input>。

Answer 2

我认为您需要类似以下表单验证的内容。

<script type="text/javascript">
    var field, fieldVal, required = false;

    function validatedForm() {
        field = document.querySelectorAll('.inputField');
        document.getElementById("submitButton").disabled = true;

        field.forEach(function(elem) {
            required = elem.dataset.required;
            if(required){
                elem.addEventListener('blur', function(e) {
                    checkSubmitBtn(field);
                });
            }
        });     
    }

    function checkSubmitBtn(field) {
        var isDisabled = false;
        field.forEach(function(elem) {
            fieldVal = elem.value.trim();
            if(fieldVal == ''){
                isDisabled = true;
                return false;
            } 
        });

        document.getElementById("submitButton").disabled = isDisabled;
    }

    window.addEventListener("load", validatedForm);
</script>

我希望它有所帮助...

javascript验证整个表单

2 个答案: