javascript - Javascript disable button with alert in content page

Question

I have to prepare a small script that can disable button if input field is lower than number 1, and when the user presses the button while it is disabled he will get alert. Alert should be in content page, no popup. I prepared something like that:

<!-- 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);        
 }
});

This code works very well, but it only works if there is any value in the input field. I can enter 0 and validation is passed, also i can't modify the code to display alert text if user click on disable button.

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/

HTML

<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();
            }
        });
    });