Пользовательская проверка Bootstrap для элемента формы - PullRequest
Новая
       5

Пользовательская проверка Bootstrap для элемента формы

0 голосов
/ 12 апреля 2020

Я собираю ABN (австралийский бизнес-номер) в регистрационной форме. Я написал здесь javascript, который выполняет проверку на основе правила проверки ABN:

function validateABN (abnNumber) {

var weights = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var result = false;

if (abnNumber.length === 11) {

    var sum = 0;
    var weight;

    for (var index = 0; index <= weights.length - 1; index++) {
        weight = weights[index];
        digit = abnNumber[index] - (index ? 0 : 1);
        sum += weight * digit;
    }

    result = sum % 89 === 0;
}

return result;
}
console.log(validateABN('43154365778'));

Имя поля формы: CompanyABNACN

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

Я искал в Google и на форумах переполнения стека и не смог найти пример, аналогичный моему или Я нашел действительно сложные примеры, которые не могу понять.

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

<div class="account-hold my-account register">
    <div class="container">
        <div class="row mt-30">
            <div class="col-sm-12">
                <h1 class="my-account-label">Create Account</h1><hr class="ghr">
            </div>
            <div class="col-sm-6 pull-right">
                <img src="assets/images/content-images/register/image.jpg" class="img-responsive" alt="" />
            </div>
            <div class="col-sm-6">
                <p class="my-account-label-p mb-30">Already have an account? <a href="/login/">Click here</a> to sign in or complete the form below to create a new account</p>
                <form name="registrationform" id="registration-form" action="/registration/" method="post" class="form-horizontal validate-form" role="form">
                    <input type="hidden" name="page" value="register" />
                    <input type="hidden" name="redirect" value="/content/thank-you-registration/" />
                    <input type="hidden" id="validated" value="f" />
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">First Name:</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="firstname" type="text" id="firstname" placeholder="" class="form-control required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Last Name :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="lastname" type="text" id="lastname"  placeholder="" class="form-control required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Email Address :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="email" type="email" id="registration-email"  placeholder="" class="form-control required email" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">ABN :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid"  />
                            <div class="form-control hidden invalid-feedback">Please provide a valid ABN.</div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Company :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="CompanyName" type="text" id="CompanyName"  placeholder="" class="form-control required company" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Phone Number :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="PhoneNumber" type="text" id="PhoneNumber"  placeholder="" class="form-control phone-number" />
                        </div>
                    </div>
                            <input name="birthday" type="hidden" id="birthday" class="form-control" placeholder="" />
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Capricorn Member Number:</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="capicorn_number" type="text" id="capicorn_number" class="form-control" placeholder="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Street Address :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="streetaddress" type="text" id="street-address"  placeholder="" class="form-control street-address required auto-streetaddress" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Suburb / City :</label>
                        <div class="col-lg-8 col-md-8">
                            <input name="suburb" type="text" id="suburb"  placeholder="" class="form-control city required auto-suburb" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">State :</label>
                        <div class="col-lg-8 col-md-8">
                            <select name="state" class="form-control required auto-state" id="state">
                                    <option value="">Please Select</option>
                                    <option value="ACT">Australian Capital Territory</option>
                                    <option value="NSW">New South Wales</option>
                                    <option value="NT ">Northern Territory</option>
                                    <option value="QLD">Queensland</option>
                                    <option value="SA ">South Australia</option>
                                    <option value="TAS">Tasmania</option>
                                    <option value="VIC">Victoria</option>
                                    <option value="WA ">Western Australia</option>
                                </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Country : </label>
                        <div class="col-lg-8 col-md-8">
                            <select name="country" id="Country" class="form-control clone required auto-country" data-native-menu="false" data-rel="country-field">
                                <option value="">Please Select</option>
                                <option value="Australia" >Australia</option>
                                <option value="New Zealand" >New Zealand</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Post Code : </label>
                        <div class="col-lg-8 col-md-8">
                            <input name="postcode" type="text" id="postcode" class="form-control required auto-postcode" placeholder="" />
                        </div>
                    </div>
                    <!---
                    <input type="hidden" name="password">
                    <input type="hidden" name="password2">
                    --->
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Account Password :</label>
                        <div class="col-lg-8 col-md-8">
                            <input type="password" name="password" id="password" class="form-control required" placeholder="" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Confirm Password :</label>
                        <div class="col-lg-8 col-md-8">
                            <input type="password" class="form-control required" id="password2" name="password2" data-rel="password" placeholder="" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 col-md-4 control-label label">Newsletter: </label>
                        <div class="col-lg-8 col-md-8">
                            <input type="checkbox" name="newsletter1" id="newsletter1" value="1" checked="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-4 col-lg-3 col-md-offset-4 col-md-3 text-left">
                            <input name="submitbutton" id="submit-button" type="submit" value="Register" class="btn partwise-btn btn-block text-uppercase" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Вы не указали, когда должна проводиться проверка, например, когда пользователь вводит номер ABN или когда он отправляет форму. Предполагая первое, вы можете сделать следующее:

  1. Добавить прослушиватель событий 'input' в поле ввода ABN, чтобы он проверял каждый раз, когда пользователь вводит что-то в это поле: 
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" oninput="do_validate();" />

(Вы также можете использовать jQuery, чтобы добавить прослушиватель событий, а не делать это встроенным, как в моем примере выше.)

Ваша функция проверки должна выглядеть примерно так: 
function do_validate() {
    if ( validateABN( $('input#CompanyABNACN').val() ) ) {
        $( '.invalid-feedback' ).hide();
        $('input#CompanyABNACN').removeClass( 'is-invalid' )
    } else {
        $( '.invalid-feedback' ).show();
        $('input#CompanyABNACN').addClass( 'is-invalid' )
    }
}
0 голосов
/ 12 апреля 2020

Вам необходимо добавить класс "is-invalid" к входу, чтобы сделать недействительным для ABN через javascript. 

<div class="col-md-3 mb-3">
      <label for="ABNnumber">Zip</label>
      <input type="text" class="form-control" id="ABNnumber" name="ABNnumber" required>
      <div class="invalid-feedback">
        Please provide a valid ABN.
      </div>
    </div>

Ваш javascript должен быть как этот 

$("form#abnFormSubmit").on("submit", function(e){
e.preventdefault;
     var isAbnValid = validateABN($("#ABNnumber").val());
if(!isAbnValid){
$("#ABNnumber").addClass("is-invalid");
}
else{
$("#ABNnumber").removeClass("is-invalid");
}
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...