How do I use ReGex with a webpage - html

I just found out about Regex, so sorry if it's a noob question, but I want to use it in a webpage, so I tried it, and it didn't work. Is there a library? SDK? or line of code I am missing?? Here is the code I have, that isn't working in my bootstrap5 project:
<input name="phone" type ="tel" id="phone" pattern="\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}" placeholder="xxx-xxx-xxxx phone" />
Thanks,

Pattern is checked against on form submission.
So if you add form tag() and try submit, it will check your pattern
I confirmed your code is working in https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

Related

HTML - how to clear data validation once error has been removed

I am making a cloud page and have set an alphabetic data validation in html which is working fine in that a user cannot enter anything other than letters.
The issue I am now having is that the data validation doesn't go when the error has been corrected i.e. the user cannot submit the page.
The code snippet is below. Please can someone give me a steer on how to rectify this? I have tried onblur but it didn't work.
Thanks in advance!
<input pattern="[A-Za-z\s]*" oninvalid="setCustomValidity('Please enter your first name')" name="Firstname" class="answer_box" placeholder="Enter your first name">
With setCustomValidity() the field is invalid. You have to clear the validation:
oninput="setCustomValidity('')"
As mentioned in this documentation.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

Magic Form in OctoberCMS

I've being trying to edit some fields in the Magic Form plugin in OctoberCMS, but i'm facing some dificulties. I want to change the "recipient" that is going to receive all the information on the form in his email. But everytime i open the field "recipient", it has this html code inside. Heres a print showing it:
"Destinatários" is the portuguese translation for "Recipient", where i should be able to write down an email, and should be good to go. However, everytime i open it, it has the same code inside, doesn't matter if i delete it.
To fix this issue you need to change core OctoberCMS file
Source : https://tutorialmeta.com/october-cms/magic-forms-octobercms-bug-fix-solution
modules\system\assets\ui\storm-min.js (approx line no: 5808)
Before
After
This
<textarea class="form-control size-small field-textarea" name="name">
</textarea>
To This
<textarea class="form-control size-small field-textarea" name="name" value=""/>
It will fix your issue
if you have any doubt please comment.
Just remove that html and add the email addresses you want (each address on a new line)

How to disable autofill in chrome v72.0.3626.109 non-input password

After update chrome to version 72.0.3626.109, tag autocomplete off stopped work,
I'm trying use autocomplete='somestring', but not work.
Follow the image:
I tried autocomplete="false", autocomplete="off" and plugin for disable autofill, use jQuery to add attribute autocomplete, but not worked!
Sorry for my english.
I struggled with something very similar and found this question while I was searching for answers, here's how I fixed it.
My situation: I have an input field for searching, and somewhere else I had a username and password field. Chrome recently started putting the autocompleted username in the search field.
Apparently, Chrome ignores autocomplete="off" now, and goes by the string value to try to determine what type of data to autocomplete. So if you have a search box, you should put autocomplete="search" so Chrome won't put the username in there, for example.
When I first noticed a long time ago autocomplete="off" was being ignored for my search box, I switched to autocomplete="search" and that worked. Now, Chrome started putting the username in the search box again with the latest update.
The way to fix this, if your situation is similar, is to put the autocomplete field for all of your text inputs with a string describing what it is.
BEFORE:
<input id='search' type='text' autocomplete="search">
And somewhere else on the page...
<input id='login_username' type='text'>
<input id='login_password' type='password'>
AFTER
<input id='search' type='text' autocomplete="search">
And somewhere else on the page...
<input id='login_username' type='text' autocomplete="username">
<input id='login_password' type='password' autocomplete="password">
Additionally, putting the inputs in a form also affects the autocomplete, but I didn't have too much time to mess with that and I needed a quick fix to get my site working properly again. Hope this helps someone.

How to set the language of the required fields feedbacks?

I would like to set up the message tip of a required field in html5
<html lang="en">
<input type="email" required="required" />
The message tip keeps on being labeled in french. I don't know which variable cause the browser to choose any language.
Isn't there a way to handle the html5 interaction languages smoothly (without JS)? I expected the langattr to be sufficient...
Had the same problem
Actually, you shoud use JS to achieve that. On another hand, you could recompile your browser from source and change manually texts that are not in your desired language if you absolutely do not want to use JS.
Yes, you should use
setCustomValidity("Votre Custom Mensaje Naturlish");
whithin an oninvalid handler function attached to the input element.
Something like:
<input type="email" oninvalid="handlerToCall(this)" required="required" />
Here you'll find answers that are valid and do work for what you want to do.
Try the jsfiddle live examples and you'll see for yourself :)

fine uploader - freeform - expression engine

i have a form created in 'freeform' that uses the 'file browse' input to allow people to upload an image file. thing is we'd like to give some feedback to the users regarding how much of the file has uploaded so i thought using 'fine uploader' would be a good start. we're also using 'expression engine' as our CMS.
the thing is i have no idea how to implement 'fine uploader' with 'EE' or 'freeform'. does any one have any tips ? can i wrap fine uploader around the 'input file' tag ? and how can i direct 'fine uploader' to our 'freeform' ee extension ?
any help would be appreciated! :D
thanks!
an example of what we have working at the moment..
{exp:freeform:form
form:name="photocomp"
form_name="photo_contest_2013"
form:id="2"
ajax="no"
error_page="forms/submit_errors"
matching_fields="email"
return="forms/submit_success"
}
<input class="required" type="text" class="input_large" name="first_name" id="first_name" placeholder="First Name">
<input type="file" name="upload_photo_1[0]" id="upload_photo_10" size="40">
<button class="altButton" value="donate" type="submit" name="submit" title="submit">Let's do this!</button>
{/exp:freeform:form}
I'm not sure Fine Uploader will be able to help you here as its not clear how or even if it can be integrated with FreeForm. You will likely need to discuss your requirements with the people at FreeForm. Fine Uploader would need to send the files to FreeForm's server (I assume), and FreeForm would have to respond according to Fine Uploader's defined response convention (e.g. {success: true}).