728x90
반응형
checkValidity(): <form>안에 유효성체크값이 잘 처리되면 true반환함수
call-> filter 주체변경(Array->forms)하여 사용
 
novalidate : required가 있어도 무시
 
a
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script>
</head>
<body>
    <div class="container">
        <h2>Form Validation</h2>
        <p>다음 예제에서는 <code>.needs-validation</code>을 사용하여 양식을 제출한 후
        (누락된 내용이 있는 경우 유효성 검사 효과를 추가합니다.</p>
        <p>입력 필드를 작성하기 전에 확인을 눌러 효과를 확인하십시오.</p>

        <form action="#" class="needs-validation" novalidate>
            <!-- novalidate : required가 있어도 무시 -->
        <!-- <form action="#" class="needs-validation"> -->
            <div class="form-group">
                <label for="uname">이름 : </label>
                <input type="text" class="form-control" id="uname" placeholder="이름을 입력해주세요."
                name="uname">
                <div class="valid-feedback">유효성검사</div>
                <div class="invalid-feedback">이 필드를 작성해 주세요.</div>
            </div>

            <div class="form-group">
                <label for="pwd">비밀번호 : </label>
                <input type="password" class="form-control" id="pwd" placeholder="비밀번호를 입력해주세요."
                name="pswd" required>
                <div class="valid-feedback">유효성검사</div>
                <div class="invalid-feedback">이 필드를 작성해 주세요.</div>
            </div>
            
            <div class="form-group">
                <label class="form-check-label">
                <input type="checkbox" class="form-check-label" name="remember" required>
                양식제출에 동의합니다.
                <div class="valid-feedback">유효성검사</div>
                <div class="invalid-feedback">계속하려면 이 확인란을 체크해주세요.</div>
            </label>
            </div>

            <button type="submit" class="btn btn-primary">확인</button>
            
        </form>
    </div>
    <script>
        // 잘못된 필드가 있는 경우 양식 제출 사용 안 함
        (function(){
            window.addEventListener('load', function(){
                // 유효성 검사 스타일을 추가할 양식 가져오기
                var forms = document.getElementsByClassName('needs-validation');

                // 반복하여 제출 방지
                var Validation = Array.prototype.filter.call(forms, function(form){
                    // call-> filter 주체변경(Array->forms)하여 사용
                    form.addEventListener('submit', function(event){
                        // if(form.checkValidity() === false {
                            if(!form.checkValidity()){
                                // checkValidity(): <form>안에 유효성체크값이 잘 처리되면 true반환함수
                                // preventDefault() : 기본 이벤트 방지
                                event.preventDefault();
                            } //if문 종료괄호
                            // jQuery의 addClass()와 동일
                            form.classList.add('was-validated'); 
                            //classList로 배열로 가져와라
                            //class="needs-validation was-validated"
                        }, false); //form.addEventListener('submit' ~~~) 함수호출문 종료
                        // false(버블링) event전파 조상->자식 default값
                    }); //call() 함수호출문 종료
                }, false); //load함수호출문 
            })();
            $(function(){
                var forms = $('.needs-validation');
 
                forms.filter(function(i,o){
                    $(o).on('submit',function(e){
                        if(!o.checkValidity()){
                            e.preventDefault();
                        }
                        $(o).addClass('was-validated');
                    });
                });
            });
    </script>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

[Bootstrap] carousel, icon  (0) 2024.03.12
[Bootstrap] navbar  (0) 2024.03.12
[Bootstrap] grid, button  (0) 2024.03.11
[Bootstrap] container, col  (0) 2024.03.11
jqueryui  (0) 2024.03.11

+ Recent posts

티스토리툴바