Question

我想在提交页面之前检查输入字段的值是否有效使用onchange。我写的如下。它验证得很好。但是当输入条目没有错误时如何激活'NEXT'按钮。

<div><input type="text" name="your_name" id="your_name" onchange = "validate_Name(this,1,4)" />
   <span id="your_name-error" class="signup-error">*</span>
</div>
<div><input type="text" name="your_addr" id="your_addr" onchange = "validate_Name(this,1,4)" />
   <span id="your_addr-error" class="signup-error">*</span>
</div>
<input class="btnAction" type="button" name="next" id="next" value="Next" style="display:none;">

<script type="text/javascript" src="../inc/validate_js.js"></script>
<script>
    $(document).ready(function() {
        $("#next").click(function() {
            var output = validate(); //return true if no error
            if (output) {
                var current = $(".active"); //activating NEXT button

            } else {
                alert("Please correct the fields.");
            }
        });
    }

    function validate() {
        //What should write here?I want to analyse the validate_js.js value here.
    }
</script>

在validate_js.js内部

function validate_Name(inputVal, minLeng, maxLeng) {

    if (inputVal.value.length > maxLeng) {
        inputVal.style.background = "red";
        inputVal.nextElementSibling.innerHTML = "<br>Max Characters:" + maxLeng;
    } else if (!(tBox.value.match(letters))) {
        inputVal.style.background = "red";
        inputVal.nextElementSibling.innerHTML = "<br>Use only a-zA-Z0-9_ ";
    } else {
        inputVal.style.background = "white";
        inputVal.nextElementSibling.innerHTML = "";
    }
}

Answer 1

如果通过＆＃34;激活＆＃34;你想让它可见，你可以拨打$('#next').show()。

但是，如果您想模拟点击它，使用jQuery，您可以按here所述简单地调用$('#next').click()或$('#next').trigger('click')。此外，您可能希望将所有内容放在表单中，并在输入通过验证时以编程方式提交表单。

Answer 2

您可能会触发每个字段的change事件，以便再次验证每个字段。

例如

function validate() {
    $("#your_name").trigger('change');
    $("#your_addr").trigger('change');
}

使用javascript验证输入字段

2 个答案: