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

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

Related

How do I use ReGex with a webpage

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

HTML can send Form without anything in E-Mail

so we´re doing a basic HTML site in School,
i got the Following Problem:
I want to do a form where you have to put in your E-Mail Adress, so i used:
<input type="email" ....>
when i type in anything thats not an E-Mail Adress, it gives me an error when i try to send,
allthough when i send it without anything typed in it just sends it,
i tried minlenght="5" still same Problem.
thanks for your help
Marvin Letsche
add required to your input field
<input type="email" .... required>

How to not change page when the login fields are empty

i'm adding a login system to my website i've figured out how to change pages but even if my login fields are empty when i click on my login button it changes page like i'm logged in while i'm not. Before adding the a href='index.html' when i was clicking the login button the site told me that i needed to fill the login field but now when i click even if the field are empty there's no error message and it changes page.
sorry if my explanations are a bit messy if you need more infos tell me ! :)
here's my code :
<form>
<input type="email" class="input-box" placeholder="Email" required>
<input type="password" class="input-box" placeholder="Password" required>
<button type="submit" class="submit-btn">Login</button>
<input type="checkbox"><span>remember me</span>
</form>
You can use several options to fix your problem.
As some others already suggested you can use JavaScript to validate the content of your input field. This is only on the client and wil leave your server still vulnerable to attacks. You should do a server validation too, with PHP for example and to be 100% safe a constraint validation for the database.
You could simple set constraint inside the HTML Tags:
(min-length, max-length, pattern(RegEx))
and so on.
Check the W3Schools site for more detailed information.
I would still use the aditional option from 1) to be safe!

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.