JQuery:如何在默认值未更改时禁用表单提交

JQuery: How to disable form from submission when default values aren't changed

本文关键字：表单提交默认值 JQuery 更新时间：2023-09-26

如果默认用户名和密码值未更改或留空，我如何禁用表单提交?如果没有更改或填写任何内容，我还想显示一条警报消息。下面是我的代码:

<script>    
$(document).ready(function(){
        $('input[type=text], input[type=password]').focus(function() {
            if(this.value === this.defaultValue)
            {
                 $(this).val("");
            }
        }).blur(function(){
            if($(this).val().length == 0)
            {
                $(this).val(this.defaultValue);
            }
        });
    })
</script>
<form id=""form1" action="process.php" method="post">
<input type="text" name="un" value="Username"/>
<input type="password" name="pw" value="Password"/>
<input type="submit" value="Submit"/>
</form>

请帮忙!提前感谢!

查看jQuery验证插件的实现。

这是一把能用的小提琴。

<body>
.... other content ....
<form id="form1" action="process.php" method="post">
    <input type="text" name="un" placeholder="Username" /><br />
    <input type="password" name="pw" placeholder="Password" /><br />
    <button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
</body>
    <script type="text/javascript">
    $('#form1').validate({
        errorElement: 'label',
        rules: {
            un: {
                required: true,
                minlength: 1
            },
            pw: {
                required: true
            }
        },
        messages: {
            un: {
                required: 'Please enter your name.'
            },
            pw: {
                required: 'Please enter your password.',
            }
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
    </script>

更改HTML为:

   <input type="submit" value="Submit" onclick="return validateForm();"/>

function validate form:

function validateForm(){
    var defaultValue ='blabla';
    var text = $('input[type=text]').val();
    var pass= $('input[type=password]').val();
    if(text.length==0||text===defaultValue||pass.length==0||pass===defaultValue){
       return false;
       //alert if you want
    }
    else{
       return true;
      }
    }

好了，注意输入id的使用:

<form id="form1" action="process.php" method="post">
    <input type="text" id="un" name="un" value="Username"/>
    <input type="password" id="pw" name="pw" value="Password"/>
    <input type="submit" value="Submit"/>
</form>

使用纯JS:

var form1 = document.getElementById("form1");
form1.onsubmit = function() {
    var un = document.getElementById("un");
    var pw = document.getElementById("pw");
    if (un.value == "" || pw.value == "") {
        return false;
    }
};

这是工作

<form id="form1" action="" method="post">
    <input type="text" name="un" default="Username" value="Username"/>
    <input type="password" name="pw" default="Password" value="Password"/>
    <input type="button" value="Submit" onclick="validateForm()"/>
</form>
<script>
function validateForm(){
            if($('input[type=text], input[type=password]').val()!=$('input[type=text], input[type=password]').attr("default")){
                $("#form1").submit();
            }else{
                return false;
            }
        }
$(document).ready(function(){
        $('input[type=text], input[type=password]').focus(function() {
            if($(this).val() === $(this).attr("default"))
            {
                 $(this).val("");
            }
        }).blur(function(){
            if($(this).val().length == 0)
            {
                $(this).val($(this).attr("default"));
            }
        });
    });

</script>