ایجاد validation جهت تست صفحات سایت

زیر نظر گرفتن کاربر با استفاده از Validation ها

validation

ایجاد validation جهت تست صفحات سایت

کار Validationها تست صفحات سایت می باشد . به این گونه که شما با استفاده از Validationها کاربر را زیر نظر داشته از صحت و سقم اطلاعاتی که وارد می کند مطمئن می شوید سپس اقدام به ثبت اطلاعات خواهید کرد. به عنوان مثال وقتی کاربر ایمیل را وارد میکند از طریق Validation مخصوص به ایمیل میتوانید ساختار پست الکترونیکی وارد شده را بررسی نمایید در صورت مغایرت با ساختار اصولی به کاربر یادآوری کنید که اشتباه خود را اصلاح نماید این کار باعث می شود درصد صحت اطلاعات شما بالا رود. Validationها به دو دسته سمت کاربر و سمت سرور تقسیم می شوند که ما در این بخش سمت کاربر را توضیح خواهیم داد.

لینک دمو


ابتدا فایل استایل bootstrap.css و فایل jqBootstrapValidation.js را ضمیمه نمایید سپس کدهای زیر را وارد کنید.


کد HTML جهت ایجاد Validation

<form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">Email address</label>
            <div class="controls">
                <input type="email" />
                <p class="help-block"></p>
            </div>
        </div>
    </form>

    <form class="form-horizontal" novalidate="">
        <div class="control-group">
            <label class="control-label" for="email">Email address</label>
            <div class="controls">
                <input type="email" name="email" id="email" required="">
                <p class="help-block">Email address we can contact you on</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="emailAgain">Email again</label>
            <div class="controls">
                <input type="email" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" id="emailAgain" name="emailAgain">
                <p class="help-block">And again, to check for speeling miskates</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="terms-and-conditions">Legal</label>
            <div class="controls">
                <label class="checkbox">
                                    <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required="" data-validation-required-message="You must agree to the terms and conditions">
                                    I agree to the <a href="#">terms and conditions</a>
                                </label>
                <p class="help-block"></p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Quality Control</label>
            <div class="controls">
                <label class="checkbox">
                                    <input type="checkbox" name="qualityControl[]" value="fast" data-validation-minchecked-minchecked="2" data-validation-minchecked-message="Choose two" data-validation-maxchecked-maxchecked="2" data-validation-maxchecked-message="You can't have it all ways">
                                    Fast
                                </label>
                <label class="checkbox">
                                    <input type="checkbox" name="qualityControl[]" value="cheap">
                                    Cheap
                                </label>
                <label class="checkbox">
                                    <input type="checkbox" name="qualityControl[]" value="good">
                                    Good
                                </label>
                <p class="help-block"></p>
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button><br> (go ahead, nothing is sent anywhere)
        </div>
    </form>


کد JAVASCRIPT جهت ایجاد Validation

 <script>
        $(function() {
            $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
        });
 </script>

منبع:طراحی سایت ارزان
 

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود