Unable to check validation with regular expression using jQuery validation plugin

Thanks for your help, I am setting up a custom rule using jQuery validation, but it is not applying.

The rules I want to apply are zip code and phone number.

For the zip code, I don’t want to accept anything other than the input xxx-xxxx.

For phone numbers, the rule is that numbers less than 10 digits are not accepted.

Currently, this code is validated with an error message if not entered, but the rules I have set for each item are not validated.

This is the code I put in the <before tag.

I have done a lot of research and fixed it many times, but it is not reflected properly.

Is it not possible to set fine-grained validation in Webflow?

If anyone knows, I would appreciate it if you could let me know.

https://preview.webflow.com/preview/current-client-s-site?utm_medium=preview_link&utm_source=designer&utm_content=current-client-s-site&preview=cc899d6bbc6debdc44eed5fcc3213492&pageId=6501a214994dc19d15cb264d&workflow=preview

This is the published page.
https://current-client-s-site.webflow.io/contact-page

Best regards

お久しぶり Makiko :laughing:

Before I explained that the capitalization in your validation configuration code needs to exactly match the name attributes in your fields, or it won’t work.

I can see you’ve updated messages which looks great;

However your rules also needs that same capitalization.

Right now it is ignoring your postal code rules because the field has a name of Postalcode, but the rule that exists is named postalcode ( all lowercase ). It doesn’t get matched.

If you fix all of those, it should find your rules fine.

1 Like

Thank you so much!
I could make it!

In the example site, the name attribute and ID are strings that start with an uppercase letter and a lowercase letter, respectively, and that worked well, but to make it work, you need to completely set the name attribute to a string that starts with an uppercase letter, and also set the rules and message to a string that starts with a lowercase letter. I see that it works well.

I learned a lot.

I am very glad that Michael taught me how to do this.

Thank you very much!

Here’s the code that worked.

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>


<script>

  var $form = $("form");
   $.validator.addMethod("pattern", function(value, element) {
   
  return this.optional(element) || value == value.match(/^[0-9]{3}-[0-9]{4}$/);
});
  // バリデーションルールを設定
  $form.validate({
    rules: {
      Contactname: {
        required: true,
        minlength: 3
      },
      Companyname: {
        required: true,
        minlength: 3
      },
      Postalcode: {
        required: true,
        pattern: true
      },
      Adress: {
        required: true,
        minlength: 8,
      },
      Phonenumber: {
        required: true,
        rangelength: [10, 11],
        digits: true
      },
      Companyemail: {
        required: true,
        email: true
      },
      Inquirydetails: {
        required: true
      }
    },
    messages: {
      Contactname: {
        required: "名前を入力してください",
        minlength: "名前は3文字以上で入力してください"
      },
      Companyname: {
        required: "会社名を入力してください",
        minlength: "会社名は5文字以上で入力してください"
      },
      Postalcode: {
        required: "郵便番号を入力してください",
        pattern: "半角数字にて例: 123-4567のようにご入力ください",
      },
      Adress: {
        required: "住所を入力してください",
        minlength: "住所は8文字以上で入力してください"
      },
      Phonenumber: {
        required: "電話番号を入力してください",
         rangelength:"電話番号に必要な桁数で入力してください",
        digits: "半角で入力してください"
      },
      Companyemail: {
        required: "有効なメールアドレスを入力してください",
        email: "有効なメールアドレスを入力してください"
      },
      Inquirydetails: {
        required: "内容をを入力してください"
      }
    }
  });

</script>

1 Like

それは完璧です Makiko、

JavaScriptとjQueryフォームのバリデーションライブラリを使用している間に役立つかもしれない2つの注意点があります-

  1. 使用する名前は、Companyemailのように最初の文字が大文字で、残りが小文字である必要は常にありませんが、JavaScriptで使用する名前とフィールドのnameは完全に一致する必要があります。phoneNumberやphonenumber、PHONENUM を使用しても、両方が一致していれば問題ありません。

  2. ここでIDが重要であるとは思いません、そしてそれは完全に異なってもよいでしょう。 IDは通常、他のことに使用されます。 このライブラリでは、nameを使用していると思いますが、idは使用していないと思います。

それを動作させたことを嬉しく思います!

Michaelさん

日本語での返信をありがとうございました!
また、Javascript内で使用する設定名とhtmlのname属性の名前の完全一致について、改めてご説明をありがとうございました!

IDについては、今回のような実装にはひつようではないのですね。

大変勉強になりました!

ありがとうございました!

Dear Michael

Thank you very much for your reply in Japanese!
Also, thank you again for your explanation about the exact match between the configuration name used in Javascript and the html name attribute name!

As for the ID, it is not necessary for an implementation like this.

I learned a lot!

Thank you very much!