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

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>

here is CSS :

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

here is the script :

    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

Try this

HTML

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

Script

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

Fiddle

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

Answer 3

Here is my stab at it. I know it has already been answered... but I already did the work.

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