How to do email and phone validation in wagtail

Question

models.py

class PartnerFormField(AbstractFormField):
    page = ParentalKey(
        'PartnerPage',
        on_delete=models.CASCADE,
        related_name='form_fields',
    )


class PartnerPage(AbstractEmailForm):

    template = "resources/partner_form.html"
    # This is the default path.
    # If ignored, Wagtail adds _landing.html to your template name
    landing_page_template = "resources/partner_form_thankyou.html"

    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        FieldPanel('intro'),
        InlinePanel('form_fields', label='Form Fields'),
        FieldPanel('thank_you_text'),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address', classname="col6"),
                FieldPanel('to_address', classname="col6"),
            ]),
            FieldPanel("subject"),
        ], heading="Email Settings"),
    ]  
    def get_form_fields(self):
        return self.custom_form_fields.all()

partnerform.html

<section class="partner-form">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12">
        <h2 class="text-center font-weight-bolder">Become a <span style=" color: #f98439;">Domitos</span> partner now!</h2>
      </div>
      <div class="col-lg-5 col-12 mt-4">
        <div class="card p-5 shadow">
          <form id="partnerForm" action="{% pageurl page %}" method="POST">
            <div class="form-group">
                {% csrf_token %}
                                        
                {% for field in form %}
                <div class="form-group">
                  {{ field.label_tag }}
                  {% render_field field class+="form-control" placeholder+=field.help_text %}
                 
                </div>
              {% endfor %}
            <div class="form-group mx-4 mt-4 mb-0">
              <button type="submit" class="btn text-white w-100 p-3">SUBMIT</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

How to validate email and phone in html. When i enter something in email it should not submit i want to display enter valid email address and valid phone number How to do this in wagtail please help me to solve this Thanks in advance

AlMo320 · Answer 1 · 2021-12-20T05:33:45.257

0

Use the RegexValidator object, here is a sample I wrote to validate a timeZone entry:

    timezone = models.TextField(
        max_length=25,
        help_text="Examples: US/Pacific, America/Los_Angeles, Etc/UTC",
        default='Etc/UTC',
        validators=[
            RegexValidator(
                regex = r'^(\w+\/?\w+)$',
                message ='Examples: US/Pacific, America/Los_Angeles, Etc/UTC',
                code='invalid_tz'
            )
        ]
    )

You can plug in formatting code such as these examples in the regex= line of your models.py. Email is perhaps a bit more tricky; kindly reference this article for samples and possible pitfalls.

edited Dec 20 '21 at 05:33

answered Dec 20 '21 at 05:27

AlMo320

125
1
9

In models.py I done wagtail form fields not done separate form fields then how to do this in models.. Please help – Ranjitha Sanker Dec 22 '21 at 03:23
I read this: https://docs.wagtail.io/en/stable/reference/contrib/forms/index.html#form-builder-usage to mean that you need to use separate form fields if you want validation on individual fields: "wagtailforms is not a replacement for Django’s form support. It is designed as a way for page authors to build general-purpose data collection forms without having to write code. – AlMo320 Dec 22 '21 at 05:49
It is suggested in the above article to look at https://github.com/gasman/wagtail-form-example/ as well; maybe that can give you an insight as to how to break out your fields to perform validation. Of course an entire form can be checked for .isvalid after POST, but I'm pretty sure you're looking for something a bit more in the line of a "Responsive UI" ... – AlMo320 Dec 22 '21 at 06:01
Ok thank you..How to do separate form fields in wagtail please help – Ranjitha Sanker Dec 22 '21 at 06:03
One more link to look at: https://docs.wagtail.io/en/stable/reference/contrib/forms/customisation.html (you may have patterned your page around these examples). – AlMo320 Dec 22 '21 at 06:14
https://www.programcreek.com/python/example/71597/django.core.validators.RegexValidator shows how to use this method. I recommend any or all of the tutorials on https://learnwagtail.com/tutorials/custom-streamfield-field-validation/ but this one will show you how to add stream validation. You may want to review the distinction between validation in the admin pages (my example above) and catching validation errors by the user in completing any wagtail forms and fields therein. – AlMo320 Dec 23 '21 at 02:11
https://docs.wagtail.io/en/stable/reference/contrib/forms/customisation.html#adding-a-custom-field-type is a bit more advanced but will work fine to extend your email and phone # form fields. Or, you may wish to add validation in the HTML template, similar to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern – AlMo320 Dec 25 '21 at 04:57
Can you please vote up my answer if you think I've given you the solution you were seeking? – AlMo320 Dec 25 '21 at 04:58
It is not working in my project – Ranjitha Sanker Dec 27 '21 at 10:18
I sent you quite a few links, did you find no ideas in any of them? – AlMo320 Dec 28 '21 at 06:33

How to do email and phone validation in wagtail

1 Answers1