如何使用javascript在没有警报的情况下显示错误消息

Question

如何使用下面显示我的代码的javascript在没有警报的情况下显示错误消息

函数 validateForm() {

             if (document.getElementById('email').value.trim()=="")
            {
                alert("Please enter your Email");
                document.getElementById('email').focus();
                return false;
            }

            if (document.getElementById('password').value.trim()=="")
            {
                alert("Please enter your Password");
                document.getElementById('password').focus();
                return false;
            }

            }
    </script>

我的表单模型代码如下所示如何在文本字段下方显示错误消息

 <form  id="register-form" onsubmit ="return validateForm()" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >

                    <div class="field-wrap">
                        <label class="view-label">Email Address</label>
                        <input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value=""/>

                    </div>

                    <div class="field-wrap">
                        <input type="password" placeholder="Password" name="password" id="password" value="" />

                        <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>

                    </div>

                    <div class="field-wrap">
                        <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
                    </div>
                    <div class="field-wrap">
                        <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a>
                    </div>
                </form>

根据您修改我的代码，但仍然无法正常工作

<script>
    function validateForm() {
    if (document.myform.email.value == "") {
    document.getElementById('errors').innerHTML="Please enter a username"; return false;
    }}
    </script>

原文由 Prasad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设您正在使用引导程序；您可以使用像这样的简单警报消息

HTML

 <div id="error" class="alert alert-danger" role="alert"></div>

Javascript

 document.getElementById('error').innerHTML="Please enter a username";

将您调用的所有地方 alert 替换为上面的 javascript 代码。

参考：http: //getbootstrap.com/components/#alerts

原文由 Anos K. Mhazo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我将在表单上使用错误 div 来执行此操作…

     <form  id="register-form" onsubmit ="return validateForm()" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >

                    <div class="field-wrap">
                        <label class="view-label">Email Address</label>
                        <input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value=""/>

                    </div>

                    <div class="field-wrap">
                        <input type="password" placeholder="Password" name="password" id="password" value="" />

                        <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>

                    </div>

                    <div class="field-wrap">
                        <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
                    </div>
                    <div class="field-wrap">
                        <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a>
                    </div>
<div id='errorDiv' class='col-xs-12 pull-right'> </div>
                </form>

/// JS ///

 function validateForm() {

        if (document.getElementById('email').value.trim()=="")
        {
            document.getElementById('errorDiv').innerHTML = "Please enter your Email";
            document.getElementById('email').focus();
            return false;
        }

        if (document.getElementById('password').value.trim()=="")
        {
            document.getElementById('errorDiv').innerHTML = "Please enter your Password";
            document.getElementById('password').focus();
            return false;
        }

        }
</script>

原文由 Abhinav R Wase 发布，翻译遵循 CC BY-SA 3.0 许可协议