JQuery Проверить отдельные наборы полей - PullRequest
Новая
       6

JQuery Проверить отдельные наборы полей

8 голосов
/ 09 сентября 2010

Я разработал форму с несколькими наборами полей для представления шагов при заполнении полной формы. Наборы полей отображаются и скрываются нажатием кнопки (по одному на каждый набор полей), но я хочу проверить каждый набор полей, прежде чем отобразится следующий.

Я новичок в JQuery, и у меня возникли некоторые проблемы. Я нашел это руководство (http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/), которое позволяет мне независимо проверять различные наборы полей, но моя проблема в том, как использовать эту проверку для управления отображением и скрытием соответствующих наборов полей.

Я думал, что способ сделать это - создать функцию из каждого события нажатия кнопки, но я не могу правильно вызвать функцию проверки.

Боюсь, я сейчас совершенно сбит с толку! Помогите !!

Ответы [ 3 ]

1 голос
/ 01 февраля 2011

Используя jQuery validation плагин, вы можете обойти это, имея несколько форм на одной странице. Затем вы можете позвонить:

$ ( '# myFormId'). Проверить ()

на интересующие формы по одному.

1 голос
/ 26 июля 2016

Я наткнулся на этот пример как раз перед тем, как найти ваш вопрос, пока гуглял что-то еще, надеясь, что это поможет кому-то с такой же проблемой:

https://djaodjin.com/blog/jquery-multi-step-validation.blog.html

По сути, очевидно, только validation.jsпроверяет видимые поля по умолчанию.

Вот полный пример кода, перейдите по ссылке, чтобы увидеть объяснение: 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Multiple step form</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
    <style type="text/css">
        #personal_information,
        #company_information{
            display:none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-lg-5">
            <form class="form-horizontal" action="" method="POST" id="myform">

                <fieldset id="account_information" class="">
                    <legend>Account information</legend>
                    <div class="form-group">
                        <label for="username" class="col-lg-4 control-label">Username</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="username" name="username" placeholder="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-lg-4 control-label">Password</label>
                        <div class="col-lg-8">
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="conf_password" class="col-lg-4 control-label">Confirm password</label>
                        <div class="col-lg-8">
                            <input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Password">
                        </div>
                    </div>
                    <p><a class="btn btn-primary next">next</a></p>
                </fieldset>

                <fieldset id="company_information" class="">
                    <legend>Account information</legend>
                    <div class="form-group">
                        <label for="company" class="col-lg-4 control-label">Company</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="company" name="company" placeholder="Company">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="url" class="col-lg-4 control-label">Website url</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="url" name="url" placeholder="Website url">
                        </div>
                    </div>
                    <p><a class="btn btn-primary next">next</a></p>
                </fieldset>

                <fieldset id="personal_information" class="">
                    <legend>Personal information</legend>
                    <div class="form-group">
                        <label for="name" class="col-lg-4 control-label">Name</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-lg-4 control-label">Email</label>
                        <div class="col-lg-8">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                        </div>
                    </div>
                    <p><a class="btn btn-primary" id="previous" >Previous</a></p>
                    <p><input class="btn btn-success" type="submit" value="submit"></p>
                </fieldset>

            </form>
        </div>  
    </div>

    <script type="text/javascript">
        $(document).ready(function(){

            // Custom method to validate username
            $.validator.addMethod("usernameRegex", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
            }, "Username must contain only letters, numbers");

            $(".next").click(function(){
                var form = $("#myform");
                form.validate({
                    errorElement: 'span',
                    errorClass: 'help-block',
                    highlight: function(element, errorClass, validClass) {
                        $(element).closest('.form-group').addClass("has-error");
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        $(element).closest('.form-group').removeClass("has-error");
                    },
                    rules: {
                        username: {
                            required: true,
                            usernameRegex: true,
                            minlength: 6,
                        },
                        password : {
                            required: true,
                        },
                        conf_password : {
                            required: true,
                            equalTo: '#password',
                        },
                        company:{
                            required: true,
                        },
                        url:{
                            required: true,
                        },
                        name: {
                            required: true,
                            minlength: 3,
                        },
                        email: {
                            required: true,
                            minlength: 3,
                        },

                    },
                    messages: {
                        username: {
                            required: "Username required",
                        },
                        password : {
                            required: "Password required",
                        },
                        conf_password : {
                            required: "Password required",
                            equalTo: "Password don't match",
                        },
                        name: {
                            required: "Name required",
                        },
                        email: {
                            required: "Email required",
                        },
                    }
                });
                if (form.valid() === true){
                    if ($('#account_information').is(":visible")){
                        current_fs = $('#account_information');
                        next_fs = $('#company_information');
                    }else if($('#company_information').is(":visible")){
                        current_fs = $('#company_information');
                        next_fs = $('#personal_information');
                    }

                    next_fs.show(); 
                    current_fs.hide();
                }
            });

            $('#previous').click(function(){
                if($('#company_information').is(":visible")){
                    current_fs = $('#company_information');
                    next_fs = $('#account_information');
                }else if ($('#personal_information').is(":visible")){
                    current_fs = $('#personal_information');
                    next_fs = $('#company_information');
                }
                next_fs.show(); 
                current_fs.hide();
            });

        });
    </script>
</body>
</html>
1 голос
/ 09 сентября 2010

Вы можете написать пользовательскую функцию проверки для каждого набора полей и вызвать ее, используя функцию .keyup.Вот пример:

HTML: 

<div id="fieldset1">
    <input type="text" name="fname" id="fname">
</div>

<div id="fieldset2">
    <!--hidden using css-->
    <input type="text" name="fname" id="fname">
</div>

Javascript: 

$('#fieldset1 #fname').keyup(function () {
    // Runs every time your keystroke is released on this input
    if($(this).val() == 'Adam') {
        // Checks to see if the field's value is Adam. If it is, then it shows the next fieldset. Otherwise it hides it.
        $('#fieldset2').show();
    } else {
        $('#fieldset2').hide();
    }
}

Это, очевидно, очень простой пример, но он показывает, что вам нужносделать для того, чтобы проверить вашу форму и изменить DOM на основе ввода пользователя.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...