Maak submit knop zichtbaar

Status
Niet open voor verdere reacties.
Y

yoeri10

Gebruiker
Lid geworden
28 mrt 2014
Berichten
30
Hallo Mensen,

deze topic heb ik ook ergens anders geplaatst:
http://www.phphulp.nl/php/forum/topic/submit-button-activeren/95410/last/

Ik heb een formulier gemaakt om in te loggen:

Code: 
<form method="post">

<input type="text" name="user" id="user">
<input type="password" name="password" id="password">
<input type="submit" name="submit" id="submit" value="Log in">
</form>

Nu wil ik als de velden leeg zijn met javascript zorgen dat de submit button niet aanklikbaar is en een opacity van 0.5.

Zodra er iets in beide velden is ingevuld moet de submit opacity 1 worden en tegelijkertijd aanklikbaar zijn.

hoe maak ik deze validatie?

Groetjes Yoeri
 
Laatst bewerkt:
Beste Yoeri,

Ik heb wat voor je gemaakt, ik hoop dat je hier wat mee kunt. Ik heb er zelfs een kleine animatie in gezet omdat ik daar zin in had O:) :p is er weer uit te halen als je t niks vindt hoor.
Let wel op dat je jQuery nodig hebt om deze code te kunnen gebruiken.

HTML: 
<script>
    var MINLENGTH = 1;

    function validateFields() {
        var valid = true;
        $(".required").each(function (key, elem) {
            if ($(elem).val().length < MINLENGTH) {
                valid = false;
            }
        });
        if (!valid) {
            $("#submit").attr("disabled", "disabled");
            $("#submit").fadeTo(200,0.5);
        } else {
            $("#submit").removeAttr("disabled");
            $("#submit").fadeTo(200,1);
        }
        console.log(valid);
    }

    $(document).ready(function () {
        $(".required").keyup(function () {
            validateFields();
        });

        validateFields();
    });
</script>

<form method="post">
    <input type="text" name="user" id="user" class="required">
    <input type="password" name="password" id="password" class="required">
    <input type="submit" name="submit" id="submit" value="Log in">
</form>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan