[plugin] validator.js 유효성 검사

 

1. validator.js : 해당 스크립트와 부트스트랩(bootstrap.min.css) 연결

/* ========================================================================

* Bootstrap (plugin): validator.js v0.11.9

* ========================================================================

* The MIT License (MIT)

*

* Copyright (c) 2016 Cina Saffary.

* Made by @1000hz in the style of Bootstrap 3 era @fat

*

* Permission is hereby granted, free of charge, to any person obtaining a copy

* of this software and associated documentation files (the "Software"), to deal

* in the Software without restriction, including without limitation the rights

* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

* copies of the Software, and to permit persons to whom the Software is

* furnished to do so, subject to the following conditions:

*

* The above copyright notice and this permission notice shall be included in

* all copies or substantial portions of the Software.

*

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

* THE SOFTWARE.

* ======================================================================== */

 

 

 

 

• 뷰 소스 : 해당 유효성 검사 하는 폼에 data-toggle="validator" role="form" 를 추가한다.
  또한 유효성 검사를 하는 부분에 required를 추가하고 그 밑에 <div class="help-block with-errors"></div> 를 추가한다.

<?php

#신청 확인 폼

$sender_num = "";

$sender = "";

 

 

if (empty($sender_num) || empty($sender)) {

    $sender_num = “02-1234-5678";

    $sender = “company";

}

$phone = stripcslashes(trim($phone));

?>

<style>

li {

list-style: none;

}

#checkForm {

width: 70%;

margin: 0 auto;

}

.entry-content ul {

padding: 0 0 0 16px;

}

input[type=number] {

padding: 2px;

    border: 1px solid #bbb;

    color: #4e4e4e;

    background-color: #fff;

}

button.js-change-color {

    color: #fff;

    text-align: center;

    width: 100%;

    height: 45px;

    font-size: 20px;

    font-weight: 600;

    line-height: 100%;

    cursor: pointer;

padding: 0.375rem 0.75rem;

    border-radius: 0.25rem;

border: 0;

}

input.js-change-color {

border-radius: 0.25rem;

}

@media all and (max-width:767px) {

#checkForm {

width: 100%;

}

}

</style>

<form class="form-horizontal" id="checkForm" action="" method="POST" data-toggle="validator" role="form">

<div class="form-group text-center">

<div>

<img src="http://www.k-pet.co.kr/wp-content/uploads/2019/09/new_logo.jpg" alt="id="logo">

</div>

<div class="col-xs-12 col-md-12 " style="padding: 10px 2px;">

<p class="viewHide">발급된 쿠폰번호 확인을 위해 본인 인증을 해주시기 바랍니다.</p>

</div>

</div>

<div style="margin-bottom: 0;" class="form-group">

<!--  <label for="inputId" class="col-md-2 control-label" id="input_name">이름</label> -->

<input type="text" class="form-control" id="visitor_name" name="VISITOR_NAME" placeholder="이름을 입력해 주세요." data-minlength="2" required>

<div class="help-block with-errors"></div>

</div>

<div class="form-group">

<!--  <label for="inputId" class="col-md-2 control-label" id="input_mobile">휴대폰</label> -->

<input type="tel" class="form-control" id="phone" name="VISITOR_MOBILE" placeholder="'-' 제외하고 휴대폰 번호를 입력해 주세요." data-pattern-error="핸드폰 번호 형식이 아닙니다." data-minlength="10" pattern="(0(?:2|[0-9]{2}))[-|\/]?([0-9]{3,4})[-|\/]?([0-9]{4}$)" required>

<div class="help-block with-errors"></div>

<div class="text-center">

<button type="button" style="background-color:#9a9a9a;" class="js-change-color" id="btnSendCertNum" onclick="numSend();">인증번호 전송</button>

<input id="cert_ok" type="hidden" value="NONE">

<input id="created_cert_num" type="hidden" value="">

</div>

 

<div class="" id='divConfirmCertNum' style="display: none; padding-top: 15px;">

<div>

<input type="number" class="form-control input-lg" id="cert_num" data-minlength="6" pattern="^[\d]+$" data-pattern-error="숫자만 입력해주세요" name="txtCertficationNumber" placeholder="인증번호를 입력해 주세요.">

</div>

<div style="padding-top: 10px;">

<button type="button" style="background-color: #3f3f3f;" class="js-change-color" id="btnConfirmCertNum" onclick="coupon_info.confirmMobile();" style="display: none;">인증번호 확인</button>

</div>

<div>

<p>남은 시간 : <span style="color:red;" name="delay_time">0</span>초 안에 인증번호를 입력해 주세요.</p>

<span style="color: red;" id="spanCertNumMsg"></span>

</div>

</div>

</div>

<!--  <div class="form-group"> -->

<!--  <button type="button" style="background-color: #eb0045;" class="js-change-color" id="_btnSignin" onclick="" >확인</button> -->

<!--  </div> -->

<input type="hidden" id="fair_id" name="fair_id" value="<?= $fair_id ?>">

<input type="hidden" id="tt" name="tt" value="">

</form>

<script>

function numSend() {

var fair_id = '<?= $fair_id ?>';

var _visitor_name = $('#visitor_name').val();

var _mobile = $('#phone').val();

var _randNum = '<?= mt_rand(100000,999999); ?>';

var _content = '인증번호 ['+_randNum+']를 입력해 주세요.';

var sender_num = '<?=$sender_num?>';

var sender = '<?=$sender?>';

        if (!_visitor_name) {

alert('이름을 입력해주세요.');

$('#visitor_name').focus();

            return;

        }

        if (!_mobile) {

alert('휴대폰번호를 입력해주세요.');

$('#phone').focus();

            return;

        }

// 알림톡

coupon_info.certficationMobile(sender_num, sender, _content, _randNum);

common.unblock();

}

</script>

 

 

2. input 숫자만 작성할 수 있게

<input type="text" name="search_rnk" id="search_rnk" class="w70" value="<?= $info["search_rnk"] ?>" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');">