Question

如何使用以下显示我的代码

的javascript显示错误消息而不发出警报

function 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>

Answer 1

我将使用错误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>

Answer 2

假设你正在使用bootstrap;您可以使用像这样的简单警报消息

<强> HTML

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

<强>的Javascript

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

使用上面的javascript代码替换您呼叫alert的所有地方。

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

Answer 3

这是完整标记：使用bootstrap附带的错误选项;

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">

                <form  id="register-form" onsubmit ="return validateForm()" 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="error" class="alert alert-danger" role="alert"></div>
                </form>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">

    function validateForm() {

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

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

    }

</script>

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

3 个答案: