mercredi 26 janvier 2022

Wordpress Html5 form validation with pattern on input fields

I have done a php code that register user in two databases with checking e-mail in database via php server-side script - working well. I have done now a html form to catch all data from client and use this php script. Anyway I got a problem with form validation by html5 built-in form validation using RegEX pattern.

Below is a code but firstable I describe what i have done yet:

  1. I have done a page on wordpress website with elementor editor.
  2. Added a codesnippet with a code snippet plugin - making a php function that place a form when shortcode is called.
  3. Placed shortcode on that page and it shows a form very well.
  4. Tested it and validation is not working. It looks like wordpress is ignoring pattern in input.

Debuging a problem:

  1. I have verified a regex code on testing website and when placed "@" it shows validation error. If I place "@" in wordpress form - it passes a validation.
  2. Tried to add found in web script to delete "novalidate" in form but not worked.
  3. Tried to delete type="text" in inputs.
  4. Tried to delete required in inputs.

Nothing is helping and im stuck without ideas how make it work... Someone knows what is going on?

CODE:

<form class="bcformularz" action="test.php" method="post">
<p>Poniższe dane zostaną zapisane w Twoim koncie do przyszłych faktur, zostaną również użyte do utworzenia konta w aplikacji.</p>
<label>Nazwa firmy</label>
<input type="text" name="billing_company" pattern="/([^\s][a-zA-Z0-9_-\s\.]+)/g" required />
<label>Imię</label>
<input type="text" name="billing_first_name" pattern="[a-zA-Z]+" required/>
<label>Nazwisko</label>
<input type="text" name="billing_last_name" pattern="[a-zA-Z]+" required/>
<label>NIP</label>
<input type="text" pattern="[0-9]{10}" name="billing_nip" required/>
<label>Ulica i numer domu.</label>
<input type="text" name="billing_adress_1" required/>
<label>Kod pocztowy</label>
<input type="text" pattern="^[0-9]{2}-[0-9]{3}$" name="billing_postalcode" required/>
<label>Miasto</label>
<input type="text" pattern="([A-zÀ-ž]+)" name="billing_city" required/>
<label>Kraj</label>
<input type="text" pattern="([A-zÀ-ž]+)" name="billing_country" required/>
<label>Telefon (opcjonalnie)</label>
<input type="text" pattern="^[0-9]{3}-[0-9]{3}-[0-9]{3}$" name="billing_phone" required/>

<label for="userpakiet">Wybierz pakiet:</label>
<select name="userpakiet" id="userpakiet">
<option value="solo">Solo</option>
<option value="basic">Basic</option>
<option value="medium">Medium</option>
<option value="pro">Pro</option>
</select>
<input type="submit" value="ZAREJESTRUJ"/>
</form>

Aucun commentaire:

Enregistrer un commentaire