带有错误消息的javascript验证空字段

时间:2014-07-02 17:44:24

标签: javascript

任何人都可以告诉我这段代码的错误,我只想j =在first_name为空时给出错误信息。

<script type="text/javascript">

 $(document).ready(function(){
 $('#submit').click(function(){ 
      var first_name=$('#first_name').val();

 if(first_name==="" ){
                 $('#first_name').css('background-color','#D8D8D8');
                 $('#fNameErr').show();
                return false;
            }
            else{
                 $('#first_name').css('background-color','#FFFFFF');
                 $('#fNameErr').hide();
                return true;
               }

 }); 

 });  
    </script>

HTML

 <form name="myForm" action="../controller/users.php" method="POST" 
         enctype="multipart/form-data" >

            <table align="left" width="700" height="330">
                <tbody>
                    <tr>
                        <td>First Name: </td>
                        <td><input type="text" name="first_name" value=""size="45" id="first_name"/>
                            <div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>    
                    </tr>

1 个答案:

答案 0 :(得分:0)

首先我需要知道你是否从中下载了jquery文件,如果不是先执行它..否则jquery将无法工作..请按照此链接http://code.jquery.com/jquery-1.11.1.min.js,将此文件保存在您的代码所在的文件夹中...我使用的文件的名称是'jquery-1.11.1.min.js'

然后你的代码中出现了一些错误。你需要首先提交一个id为'submit'的提交按钮,你在脚本的第3行中使用它,然后需要关闭表单标签.. 正确的代码是......

<html><script src="jquery-1.11.1.min.js"></script><script type="text/javascript">

 $(document).ready(function(){
 $('#submit').click(function(){ 
      var first_name=$('#first_name').val();
 if(first_name=="" ){
                 $('#first_name').css('background-color','#D8D8D8');
                 $('#fNameErr').show();
                return false;
            }
            else{
                 $('#first_name').css('background-color','#FFFFFF');
                 $('#fNameErr').hide();
                return true;
               }

 }); 

 });  
    </script>
    <body>
    <form name="myForm" action="../controller/users.php" method="POST" enctype="multipart/form-data">

            <table align="left" width="700" height="330">
                <tbody>
                    <tr>
                        <td>First Name: </td>
                        <td><input type="text" name="first_name" value=""size="45" id="first_name"/>
                            <div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>    
                    </tr>
                    <input type="submit" id="submit" value="submit">
                    </form>
                    </body>
                    </html>

首先尝试学习基础知识。如果有帮助,请接受我的答案.. :)