缩短Jquery验证脚本?还是候补?

时间:2016-09-23 08:43:07

标签: jquery validation

所以我的问题是这个验证码是否更简单。在用户可以使用其他3个输入之前,我需要检查2个输入。我使用了很多隐藏和显示,为了验证,我使用了很多if / else。所以有人可以帮助我,因为我正在寻找如何缩短这一点。我想要的是使表单在1页上使用。我尝试使用jquery验证插件但没有成功。这是一个小提琴链接,您可以尝试:https://jsfiddle.net/br9603yq/

$(document).ready(function() {
    $("#adres").hide();
    $("#postcode").hide();
    $("#plaats").hide();
    $("#click2").hide();
    $("#edit").hide();
    $("#submit").hide();

    //Hide divs with class hidden
    $("div.hidden").hide();

    $("#click1").click(function() {
        var naam = $("#name").val();

        // Check if name has class verplicht and if name input isn't empty.
        if ($('#name').hasClass('verplicht') && $('#name').val() != "") {
            var email = $('#mail').val();
            var filter = (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
            //if e-mail matches filter
            if (filter.test(email)) {
                $("#adres").show();
                $("#postcode").show();
                $("#plaats").show();
                $("#click2").show();
                $("#click1").hide();

                //When click2 is clicked
                $("#click2").click(function() {
                    var adres = $("#adresVeld").val();
                    var postcode = $("#postcodeVeld").val();
                    var plaats = $("#plaatsVeld").val();

                    //Double validation for naam, e-mail normal validation for adres, postcode en plaats.
                    if ($('#name').hasClass('verplicht') && $('#name').val() != "") {
                        if (filter.test(email)) {
                            if ($('#adresVeld').hasClass('verplicht') && $('#adresVeld').val() != "") {
                                //Hier zit een postcode filter in voor nederlandse postcodes.
                                if ($('#postcodeVeld').hasClass('verplicht') && $('#postcodeVeld').val() != "" && $('#postcodeVeld').val().match(/^([1-9]\d{3}\s[A-Z]{2})$/)) {
                                    if ($('#plaatsVeld').hasClass('verplicht') && $('#plaatsVeld').val() != "") {
                                        alert("Controleer uw gegevens voordat u verder gaat!");
                                        $("div.hidden").show();
                                        $("#edit").show();
                                        $("#submit").show();
                                        $("#nameShow").hide();
                                        $("#mailShow").hide();
                                        $("#adres").hide();
                                        $("#postcode").hide();
                                        $("#plaats").hide();
                                        $("#click2").hide();

                                        //Geef waardes van ingevulde form aan het nieuwe form
                                        $("#nameUitlees").val(naam);
                                        $("#mailUitlees").val(email);
                                        $("#adresUitlees").val(adres);
                                        $("#postcodeUitlees").val(postcode);
                                        $("#plaatsUitlees").val(plaats);

                                        $("#edit").click(function() {
                                            $("div.hidden").hide();

                                            $("#nameShow").show(naam);
                                            $("#mailShow").show(email);
                                            $("#adres").show(adres);
                                            $("#postcode").show(postcode);
                                            $("#plaats").show(plaats);
                                            $("#click2").show();
                                            $("#edit").hide();
                                            $("#submit").hide();
                                        });

                                        $("#submit").click(function() {
                                            alert("succes");
                                        });
                                    } else {
                                        alert("Uw plaats klopt niet!");
                                    }
                                } else {
                                    alert("Uw postcode klopt niet!");
                                }
                            } else {
                                alert('Uw adres is leeg of klopt niet!');
                            }
                        } else {
                            alert('Uw email klopt niet!');
                        }
                    } else {
                        alert('Uw naam klopt niet!');
                    }
                });
            } else {
                alert("mail klopt niet");
            }
        } else {
            alert("naam klopt niet");
        }
    });
});

这是我的html表单。

<form class="large-6 small-10 form" id="testform1">
    <div id="nameShow">
        <p>
            <label>
                <h3>Name: </h3></label>
            <input type="text" id="name" class="verplicht" placeholder="Name">
        </p>
    </div>

    <div id="mailShow">
        <p>
            <label>
                <h3>Email: </h3></label>
            <input type="email" id="mail" class="verplicht" placeholder="example@example.com">
        </p>
    </div>

    <p>
        <input type="submit" value="volgende" id="click1">
    </p>

    <div id="adres">
        <p>
            <label>
                <h3>Adres: </h3></label>
            <input type="text" id="adresVeld" class="verplicht" placeholder="adres">
        </p>
    </div>

    <div id="postcode">
        <p>
            <label>
                <h3>Postcode: </h3></label>
            <input type="text" id="postcodeVeld" class="verplicht" placeholder="1234 AA">
        </p>
    </div>

    <div id="plaats">
        <p>
            <label>
                <h3>Plaats: </h3></label>
            <input type="text" id="plaatsVeld" class="verplicht" placeholder="Rotterdam">
        </p>
    </div>

    <p>
        <input type="submit" value="controle" id="click2">
    </p>
</form>

<!-- hidden uitlees divjes -->
<form class="large-6 small-10 form" id="checkform">
    <div>
        <p>
            <label>
                <h3>Name: </h3></label>
            <input type="text" id="nameUitlees" class="verplicht" readonly>
        </p>
    </div>

    <div>
        <p>
            <label>
                <h3>Email: </h3></label>
            <input type="email" id="mailUitlees" class="verplicht" readonly>
        </p>
    </div>

    <div>
        <p>
            <label>
                <h3>Adres: </h3></label>
            <input type="text" id="adresUitlees" class="verplicht" readonly>
        </p>
    </div>

    <div>
        <p>
            <label>
                <h3>Postcode: </h3></label>
            <input type="text" id="postcodeUitlees" class="verplicht" readonly>
        </p>
    </div>

    <div>
        <p>
            <label>
                <h3>Plaats: </h3></label>
            <input type="text" id="plaatsUitlees" class="verplicht" readonly>
        </p>
    </div>

    <p>
        <input type="button" value="pas aan" id="edit">
    </p>
    <p>
        <input type="button" value="verzend" id="submit">
    </p>
</from>

0 个答案:

没有答案