Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function($) {
- $(document).ready(function() {
- function sd_replaceValidationUI(form) {
- // Suppress the browser's default validation bubbles
- form.addEventListener("invalid", function(event) {
- event.preventDefault();
- }, true);
- // Support Safari, iOS Safari, and the Android browser—each of which do not prevent form submissions by default
- form.addEventListener("submit", function(event) {
- if (!this.checkValidity()) {
- event.preventDefault();
- }
- });
- //When submit is clicked, check for errors and their corresponding existing error messages
- var submitButton = form.querySelector("button:not([type=button]), input[type=submit]");
- submitButton.addEventListener("click", function(event) {
- var invalidFields = form.querySelectorAll(":invalid"),
- errorMessages = form.querySelectorAll(".error-message"),
- parent;
- // Remove any existing messages
- for (var i = 0; i < errorMessages.length; i++) {
- errorMessages[i].parentNode.removeChild(errorMessages[i]);
- }
- //Get custom messages from HTML data attribute for each invalid field
- var fields = form.querySelectorAll(".sdForm-input");
- for (var i = 0; i < fields.length; i++) {
- var message = $(fields[i]).attr("data-ErrorMessage");
- $(fields[i]).get(0).setCustomValidity(message);
- }
- //Display custom messages
- for (var i = 0; i < invalidFields.length; i++) {
- parent = invalidFields[i].parentNode;
- parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" +
- invalidFields[i].validationMessage +
- "</div>");
- }
- // If there are errors, give focus to the first invalid field
- if (invalidFields.length > 0) {
- invalidFields[0].focus();
- }
- // Submit the form as long as there are no errors
- if (invalidFields.length == 0 || typeof invalidFields === 'undefined') {
- $("form.sd_form").submit();
- }
- });
- }
- // Replace the validation UI for all forms
- var forms = document.querySelectorAll("form");
- for (var i = 0; i < forms.length; i++) {
- sd_replaceValidationUI(forms[i]);
- }
- //Changes the text of the dropdown to #666 when a selection is made
- $('.sdForm-inputWrap select').change(function() {
- $(this).css('color', '#666');
- });
- //Auto-format phone numbers while typing
- $(function() {
- $("input[type='tel']").keyup(function() {
- var curchr = this.value.length;
- var curval = $(this).val();
- if (curchr == 3) {
- $("input[type='tel']").val("(" + curval + ")" + "-");
- } else if (curchr == 9) {
- $("input[type='tel']").val(curval + "-");
- }
- });
- });
- })
- })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement