jquery.formValid - demo 2

Modifying the change method

Name *

Surname *

E-mail *

Phone number *

Street

Home number

City

Postcode

SEND

Example check the postal codes of cities in Poland. For example, enter: Toruń

Html:

<form method="post" id="form">
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="labelName" class="form-control" data-field="name">
            <label for="labelName">Name *</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="labelSurname" class="form-control" data-field="surname">
            <label for="labelSurname">Surname *</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="labelEmail" class="form-control" data-field="email">
            <label for="labelEmail">E-mail *</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="labelPhone" class="form-control" data-field="phone">
            <label for="labelPhone">Phone number *</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 field-street">
            <input type="text" id="labelStreet" class="form-control" data-field="street">
            <label for="labelStreet">Street</label>
            <div class="valid-message"></div>
        </div>
        <div class="col-md-4 field-homenumber">
            <input type="text" id="labelHomeNumber" class="form-control" data-field="homenumber">
            <label for="labelHomeNumber">Home number</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 field-city">
            <input type="text" id="labelCity" class="form-control" data-field="city">
            <label for="labelCity">City</label>
            <div class="valid-message"></div>
        </div>
        <div class="col-md-4 field-postcode">
            <input type="text" id="labelPostCode" class="form-control" data-field="postcode">
            <label for="labelPostCode">Postcode</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary" type="submit">SEND</button>
        </div>
    </div>
</form>

JavaScript:

<script>
   var form = $('#form').formValid({
    fields: {
        "name": {
            "required": true, 
            "tests": [
                {
                    "type": "null", 
                    "message": "Not entered name"
                }
            ]
        },
        "surname": {
            "required": true,
            "tests": [
                {
                    "type": "null", 
                    "message": "Not entered surname"
                }
            ]
        },
        "email": {
            "required": true,
            "tests": [
                {
                    "type": "null", 
                    "message": "Not entered e-mail adress"
                },
                {
                    "type": "email", 
                    "message": "Your email is incorrect"
                }
            ]
        },
        "phone": {
            "required": true,
            "tests": [
                {
                    "type": "null", 
                    "message": "Not entered phone number"
                },
                {
                    "type": "phone", 
                    "message": "Your phone number is incorrect"
                }
            ]
        },
        "street": {
            "required": false,
            "tests": [
                {
                    "type": "letters", 
                    "message": "Your street is incorrect"
                }
            ]
        },
        "homenumber": {
            "required": false,
            "tests": [
                {
                    "type": "number", 
                    "message": "Incorrect number"
                }
            ]
        },
        "city": {
            "required": false,
            "change": function(el) {
    
                $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + el.val() + '&sensor=false', function(data) {
                             
                    var postCode = "";
                    
                    if (data.results.length) {
                    
                        $.each(data.results[0].address_components, function(index, e) {
                            
                            if (e.types[0] == "postal_code") {
                                postCode = e.short_name+"-100";
                                return false;
                            }

                        });
                      
                        $('#labelPostCode').val(postCode);
                        $('label[for="labelPostCode"]').addClass('active');
                    
                    }
                        
                });

            }
        },
        "postcode": {
            "required": false,
            "tests": [
                {
                    "type": "postcode", 
                    "message": "Incorrect code"
                }
            ]
        }
    }
});

form.keypress(300);

$('button[type="submit"]').click(function() {
    form.test();
    if (form.errors() == 0) {
        alert('Ok');
    }
    return false;
});
</script>