如何使用JavaScript显示错误消息而不发出警报

Question

how to display the error message without alert using javascript below shown my code

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>

my form model code shown in below how to display the error message below the text field

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

according to you modify my code but still it is not working

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

Answer 1

Assuming you are using bootstrap; you can use a simple alert message like this

HTML

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

Javascript

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

Replace everywhere you are calling alert with javascript code above.

Reference: http://getbootstrap.com/components/#alerts

Answer 2

I'll do this using error div onto form...

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

Here is full markup: using error option that comes with 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>