javascript - 内容页面中带有警报的 Javascript 禁用按钮

Question

如果输入字段低于数字 1，我必须准备一个可以禁用按钮的小脚本，并且当用户在禁用按钮时按下按钮时，他会收到警报。警报应该在内容页面中，没有弹出窗口。我准备了类似的东西：

<!-- language: lang-js --> 
var toValidate = $('#inputName, #inputEmail, #inputTel'),
valid = false;
toValidate.keyup(function () {
 if ($(this).val().length > 0) {
   $(this).data('valid', true);
 } else {
   $(this).data('valid', false);
}
toValidate.each(function () {
 if ($(this).data('valid') == true) {
   valid = true;
 } else {
 valid = false;
 }
});
 if (valid === true) {
  $('input[type=submit]').prop('disabled', false);
 }else{
  $('input[type=submit]').prop('disabled', true);        
 }
});

此代码运行良好，但仅在输入字段中有任何值时才有效。我可以输入 0 并通过验证，如果用户单击禁用按钮，我也无法修改代码以显示警报文本。

Answer 1

<input type="text" />
<input type="submit" value="Button" />
<div></div>

这是CSS：

.disabled {
    background-color: #DDD;
    color: #999;
}

这是脚本：

    function Validate(value) {
    if (value.length === 0) {
        $("input[type='submit']").addClass('disabled');
        return;
    } else $("input[type='submit']").removeClass('disabled');
}

$(document).ready(function () {
    $("input[type='submit']").hasClass('disabled');

    $("input[type='text']").keyup(function () {
        Validate($("input[type='text']").val());
    });

    $("input[type='submit']").click(function () {
        Validate($("input[type='text']").val());
        if ($(this).hasClass('disabled')) $("div").html("Alert msg");
        else return;
    });
});

Answer 2

试试这个

HTML

<input type="text" id="vall" />
<input type="submit" id="btn" class="disabled" value="Button" />
<div></div>

脚本

var value=$('#vall').val();

$("#vall").keyup(function(){

    if (value.length == 0) 
    {
      $("#btn").addClass('disabled');
        $("div").html("Fill Value");
    } 
    else 
        $("#btn").removeClass('disabled');
});
   $("#btn").click(function (){
        if (value.length == 0)
            $("div").html("Fill Value");
       else
           $("div").html("");
    });

CSS

.disabled, .btn[disabled] {
    background-image: none;
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}

小提琴

http://jsfiddle.net/9asLF/2/

Answer 3

这是我的尝试。我知道它已经被回答了......但我已经完成了这项工作。

JSFIDDLE

http://jsfiddle.net/4JHy2/

HMTL

<ul class='errors' id='errors'></ul>

    <form id='myForm'>
        <label for'inputName'>Name:</label><br>
        <input type='text' id='inputName'>

        <br><br>

        <label for'inputEmail'>Email:</label><br>
        <input type='text' id='inputEmail'>

        <br><br>

        <label for'inputTel'>Telephone:</label><br>
        <input type='text' id='inputTel'>

        <br><br>

        <input type='submit' value='Submit' id='submit'>
    </form>

Javascript

var regExp = /^$|^ +$/,
        elements = [],
        eLength,
        formValid = false,
        errors;

    function clearErrors() { errors.html('') }

    function addError() { errors.append($('<li>Form disabled until all fields complete.</li>')) }

    $(function(){
        // Cache the form elements for performance and loopage.
        elements.push($('#inputName'));
        elements.push($('#inputEmail'));
        elements.push($('#inputTel'));
        eLength = elements.length;
        errors = $('#errors');

        // Listen for activity on all three elements.
        $('#inputName, #inputEmail, #inputTel').on('keyup', function(){
            // Clear previous errors.
            clearErrors();

            for(var i = 0; i < eLength; i++) {
                if (regExp.test($(elements[i]).val())) {
                    formValid = false;
                } else {
                    formValid = true;
                }
            }

            if (!formValid) { 
                addError();
            }
        });

        $('#myForm').on('submit', function(e){
            e.preventDefault();

            // Clear previous errors.
            clearErrors();

            if (formValid) {
                alert("valid");
            } else {
                addError();
            }
        });
    });