bootstrap验证器和选择器

时间:2014-07-23 10:28:31

标签: javascript jquery django twitter-bootstrap validation

我想使用this插件来验证我的表单。我的表单由标签内的许多其他表单(我使用的django)组成。所以它看起来像这样

<form action="" id="register-form" method="post">

    <div class="container bg-white">
        <div class="tab-container">
            <div class="tab-content">

                <div class="tab-pane fade in active" id="client-details">
                    <fieldset>
                        <legend>Personal Data</legend>
                        <span class="help-inline">This are your billing data</span>

                            <div class="form-group">
                                <label for="id_client-first_name">First name:</label>
                                <input class="form-control input-sm" id="id_client-first_name" maxlength="40" name="client-first_name" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-middle_name">Middle name:</label>
                                <input class="form-control input-sm" id="id_client-middle_name" maxlength="40" name="client-middle_name" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-last_name">Last name:</label>
                                <input class="form-control input-sm" id="id_client-last_name" maxlength="40" name="client-last_name" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-adress">Adress:</label>
                                <input class="form-control input-sm" id="id_client-adress" maxlength="40" name="client-adress" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-email">Email:</label>
                                <input class="form-control input-sm" id="id_client-email" maxlength="75" name="client-email" type="email">
                            </div>


                            <div class="form-group">
                                <label for="id_client-phone_no">Phone no:</label>
                                <input class="form-control input-sm" id="id_client-phone_no" maxlength="20" name="client-phone_no" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-mobile">Mobile:</label>
                                <input class="form-control input-sm" id="id_client-mobile" maxlength="20" name="client-mobile" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-no_of_doctors">No of doctors:</label>
                                <input class="form-control input-sm" id="id_client-no_of_doctors" name="client-no_of_doctors" type="number">
                            </div>



                    </fieldset>
                </div>
                <div class="tab-pane fade" id="user-data">

                        <div class="form-group">
                            <label for="id_personal_data-first_name">First name:</label>
                            <input class="form-control input-sm" id="id_personal_data-first_name" maxlength="30" name="personal_data-first_name" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_personal_data-last_name">Last name:</label>
                            <input class="form-control input-sm" id="id_personal_data-last_name" maxlength="30" name="personal_data-last_name" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_personal_data-email">Email:</label>
                            <input class="form-control input-sm" id="id_personal_data-email" name="personal_data-email" type="text">
                        </div>


                </div>
                <div class="tab-pane fade" id="practice-details">

                        <div class="form-group">
                            <label for="id_practice_data-name">Name:</label>
                            <input class="form-control input-sm" id="id_practice_data-name" maxlength="50" name="practice_data-name" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_practice_data-address">Address:</label>
                            <input class="form-control input-sm" id="id_practice_data-address" maxlength="50" name="practice_data-address" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_practice_data-postal_code">Postal code:</label>
                            <input class="form-control input-sm" id="id_practice_data-postal_code" maxlength="10" name="practice_data-postal_code" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_practice_data-phone_no">Phone no:</label>
                            <input class="form-control input-sm" id="id_practice_data-phone_no" maxlength="10" name="practice_data-phone_no" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_practice_data-city">City:</label>
                            <input class="form-control input-sm" id="id_practice_data-city" maxlength="10" name="practice_data-city" type="text">
                        </div>

                        <div class="form-group">
                            <label for="id_practice_data-logo">Logo:</label>
                            <input id="id_practice_data-logo" name="practice_data-logo" type="file">
                        </div>


                </div>

            </div>
        </div>
        <input type="submit" id="btn-register" name="register" class="btn btn-default btn-sm">
    </div>

</form>

因为我使用前缀加载表单,name属性看起来像这个“prefix-field_name”。但是这个syntac不能与插件验证器一起使用。所以不得不使用选择器。我的客户端电子邮件设置如下

$("#register-form").bootstrapValidator({

    fields:{

        id_client_email: {
            selector:"#id_client-email",
                validators: {
                    remote:{
                        url:"/order/email_check_availability/",
                        message: "This email already exists"
                     },
                    notEmpty:{
                        message: "This field is required"
                    }
                }
            }
        }
    });

但它似乎不起作用,它不会显示任何错误。唯一的错误是当我开始在电子邮件字段上输入时,它表示它无效。但是如何添加额外的验证器?是因为有名字而我也使用选择器吗?它不会在文档中的任何地方说名称总是覆盖选择器属性。

1 个答案:

答案 0 :(得分:0)

工作!我不得不把带有破折号的字段放在引号内。因此,字段客户端电子邮件必须像"client-email"一样放在插件

的字段部分中