0

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.

4

3 に答える 3

0
<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;
    });
});
于 2013-11-06T08:09:40.570 に答える
0

これを試して

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/

于 2013-11-06T09:02:40.050 に答える
0

これが私の突き刺しです。私はそれがすでに答えられていることを知っています...しかし、私はすでに仕事をしました。

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();
            }
        });
    });
于 2013-11-06T09:42:52.870 に答える