jQuery .click()

<section class="container">
    <div class="row">
        <div class="col-lg-12">
            <form class="form-setting" method="POST">
                <input class="form-item" type="text" name="name" placeholder="이름">
                <input class="form-item" type="email" name="email" placeholder="who@gmail.com">
                <textarea class="form-item form-content" name="content" placeholder="자기소개를 간단하게 해주세요"></textarea>
            </form>
            <div class="form-button-align">
                <a class="form-submit" name="submit-button" id="form-submit">제출하기</a>
            </div>
        </div>
    </div>
</section>
/**
 * Created by SangBeom on 2015-11-23.
 */
$(document).ready(function () {

    $("#form-submit").click(function () {
        var name = $("[name='name']").val();
        var email = $("[name='email']").val();
        var content = $("[name='content']").val();

        if (name.length > 0) {
            if (email.length > 0 && isEmail(email) == true) {
                if (content.length > 10) {
                    alert("입력,세가지,성공적")
                } else {
                    alert("자기소개를 10자 이상 입력해주세요")
                }
            } else {
                alert("E-mail을 정확하게 입력해주세요")
            }
        } else {
            alert("이름을 입력해주세요")
        }

    });
    function isEmail(email) {
        var regex = /^([a-zA-Z0-9.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

});

line1 $( document ).ready

A page can’t be manipulated safely until the document is “READY”
will only run once the page Document Object Model(DOM) is ready for JavaScript code to execute.

line3 $(“#form-submit”).click(function(){—-function content—-});

“제출하기” click 할 때 event가 발생한다. 그 다음줄부터는 event 내용을 쓴다.

line4~6 var name = $(“[name=’name’]”).val();

input에서 입력받은 data값을 가져온다.

line 8~20

각각의 입력이 제대로 되었는지(요구한 길이 또는 양식대로 입력했는지) validation을 확인한다.

line 23~26

email validation 확인을 위한 함수다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s