CODEWITHSUNDEEP
javascriptjqueryajaxformsvalidation
Mohammad J
Mohammad J

Reputation: 136

How to validate ajax form with onclick event on submit by jquery?

I have a simple domain whois form:

<form id="domaincheck" class="form-inline ltr" method="post">
    <input type="text" class="form-control center input-md" name="sld" id="sld" placeholder="pleade enter domain name" required>
    <select class="form-control ltr input-md input-group-addon" id="tld" name="tld" multiple="multiple">
        <option value="com" selected="">.com</option>
        <option value="ir">.ir</option>
        <option value="net">.net</option>
        <option value="org">.org</option>
        <option value="co">.co</option>
        <option value="xyz">.xyz</option>
        <option value="biz">.biz</option>
        <option value="info">.info</option>
        <option value="asia">.asia</option>
        <option value="us">.us</option>
        <option value="mobi">.mobi</option>
        <option value="name">.name</option>
    </select>
    <button type="button" class="btn btn-info" onclick="get_whois()">check!</button>
</form>

and use jquery validation plugin to validate. I have added this code to validate input to set minimum chars must be 4.

$("#domaincheck").validate({
    rules: {
        sld: {
            required: true,
            minlength: 4
        }
    },
    messages: {
        sld: {
            required: "Please input domain name!",
            minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
        }
    }
});

Now how to disable button that have onclick event to avoid send request until input be valid. and also add rule to say just these characters ( a-z A-z and "-" ) is valid to type in input.

Any Help?

Thanks

Upvotes: 0

Views: 2663

Answers (1)

Hussy Borad
Hussy Borad

Reputation: 583

Click Here For Demo JSFiddle

$.validator.addMethod("sldRegex", function(value, element) {
            return this.optional(element) || /^[A-Za-z\-]+$/i.test(value);
}, "Username must contain only letters, numbers, or dashes.");
$("#domaincheck").validate({
        rules: {
            sld: {
                required: true,
                minlength: 4,
                sldRegex: true
            }
        },
        messages: {
            sld: {
                required: "Please input domain name!",
                minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
            }
        }
        ,submitHandler: function(form) {

                    form.submit() ; 
                }
    });

Upvotes: 1

Related Questions