Question

这是我的简单代码，如果插入了错误的文本，我一直在努力显示有效或无效但我遇到的问题是，当我点击进入有效和无效的闪烁而不停留在屏幕上时。

function validate ()
{
    var me = document.getElementById("my").value;
    if (me == 'my')
    {
        document.getElementById("Result").innerHTML = "valid";
        document.getElementById("Result").style.color = "green";
    }
    else
    {
        document.getElementById("Result").innerHTML = "invalid";
        document.getElementById("Result").style.color = "red";
    }
}
<form>
    <button type="button" onclick ="yes" class="fa fa-search"></button>
    <input type="text" id="my" onchange="validate()"></input>
    <label id="Result"></label>
</form>

我正在做的错误是什么？如何解决这个问题？

Answer 1

问题是你的代码在标签内。如果您想留在页面上，则需要阻止表单提交。

我这里没有包含CSS !!

<div class="container">
    <div id="nav">

        <div id="search">
            <form id="form1">
                <button type="button" onclick ="yes" class="fa fa-search"></button>
                <input type="text" id="my"></input>
                <label id="Result"></label>
            </form>
        </div>
    </div>
</div>

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        if ( !validate()) {
            alert("Error");
            event.preventDefault(); 
            return false;
        }
    }); 
});      

function validate ()
{
    var me = document.getElementById("my").value;
    if (me == 'my')
    {
        document.getElementById("Result").innerHTML = "valid";
        document.getElementById("Result").style.color = "green";
        return true;
    }
    else
    {
        document.getElementById("Result").innerHTML = "invalid";
        document.getElementById("Result").style.color = "red";
        return false;
    }

}

Here is a fiddle.希望它会有所帮助。

基本验证javascript无法正常工作

1 个答案: