HTML input only allow numbers and letters and # - php

I've got a question and I hope someone of you have a solution for this.
Well I have this code:
<input type="text" id="username" placeholder="Email/Username"
class="Username placeholder NoPlaceholder text"
title="Email/Username" name="usern" value=""
required="required" tabindex="1" maxlength="30"/>
I would like to limit this input field to only allow a full email address.
So to disallow other symbols like: !#$%^&*()_+{}|:">?<
Input pattern won't work as someone can just delete that by inspecting element.
If someone has a tip or idea comment below!

just use HTML5 field validator:
<form>
<input type="email" name="email" autocomplete="off">
<input type="submit" value="Submit">
</form>
This will force the user to enter a text string, which makes sense for an email address..
Success!

Don't use a text type, use HTML5's email type:
<input type="email" name="email">

Related

Edit box autofill does not clear placeholder

Basic HTML PHP CSS. I have an edit box with a placeholder. In the case that I have edited the fields once before (like username and password), and the browser has cached them, and I return to the form again (e.g., the login page), both the placeholder text and the auto filled values are appearing over top of each other. This is using the osclass code, if that matters. Clicking in the edit box removes the placeholder text, and the auto-filled value remains.
Thanks for the help!
Here's the site -
letmeborrowthat
You should turn the autocomplete off in your code
i.e.,
<input id="email" type="text" name="email" value="" class="input-text" autocomplete="off">
<input id="password" type="password" name="password" value="" class="input-text" autocomplete="off">
You can read it from the mdn here

Login via enter button

I have login form and it works fine, but I don't know how to make it work via enter buttom. I did try to make it with JS, but it didn't work for some reason.
Also I think I made horrible code for login :(, but it works.
Make the sign in input a type of submit. Like this,
<input type="submit" class="zzzz" onclick="auth()" value="sign in"/>
This should fix the issue. It's a type of button currently which doesn't get triggered on submitting enter key.
Firstly add required bellow 2 input
<input name="userName" required="required" placeholder="E-mail" id="username" type="text">
<input name="password" required="required" placeholder="Password" id="password" type="password">
And then change input type bellow your submit input field
<input type="submit" class="zzzz" onclick="auth()" value="sign in"/>
Make button of input type submit and add this attribute to your form
<form onsubmit="return(false);">
so that it works with your javascript

Email Input Pattern Attribute

I am in the process of using pattern for my email input field (HTML for email) to be 1234567Z#student.glasgow.ac.uk see code snippet below, I am not getting glasgow as full (only gla appears).
Have tried to manipulate this part of the email with various other strings but unable to get the correct format as outlined earlier.
Any reason why I am getting this with the code:
Email address:
<input name="email" type='email' pattern=".+ (#student.glasgow.ac.uk)" required />
<input style="float: right;" type="submit" name="submit" value="Subscribe"/>
</form>
you can try by this code
<input type="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" />

Joomla! Contact form inside an article, can't get action php file working

I'm trying to create a contact form on my own. I noticed that it can be achieved by placing the form inside an article, instead of a custom html module.
In the client side, it seems to work. I even added a captcha manually (the re-captcha plugin doesn't seem to work for me). The problem is, I set form's action property as "mail.php", and just added this "mail.php" file to the the template root. The "mail.php" supossedly retrieves the data send by post, and finally composes and sends the email, showing a "message send" notification.
Anyway, when I click on submit, the form page is just reloaded. I guess that Joomla! can't find my "mail.php". I guess that this issue is related to the joomla structure and my inability to place the "mail.php". Any help will be wellcome.
This is how my article looks like (wysiwyg editor mode disabled):
<form action="mail.php" method="post" target="_blank">
<p><label for="nombre">Nombre:</label></p>
<p><input maxlength="50" name="nombre" size="30" type="text" /></p>
<p><label for="email">Email:</label></p>
<p><input maxlength="50" name="email" required="required" size="30" type="text" /></p>
<p><label for="asunto">Asunto:</label></p>
<p><input maxlength="150" name="asunto" size="30" type="text" /></p>
<p><label for="mensaje">Mensaje:</label></p>
<p><textarea cols="50" maxlength="700" name="mensaje" required="required" rows="8"></textarea></p>
<div class="g-recaptcha" data-sitekey="6Lefblahblahblahblah"> </div>
<p><input type="submit" /></p>
</form>

php form sanitation before sending to external url

I have a form on my site that gets submitted to a third party site which basically adds the form data as a record in the third party database. This is implemented with the form "action" attribute. I have no control over what the third party does after the form is submitted. See below for the implementation.
I'm doing javascript validation, but I also need to be able to do server-side sanitation and validation of the form data with php before it gets sent to the third party. I may also want to implement a CAPTCHA.
What approach can I take to achieve this? I thought about having the form submit to the script that houses the form, and collecting all of my $_POST variables, do the validation, and then maybe redirect to the third party URL, but not quite sure how the third party would receive all the form data if its not longer the form action. Is it possible to just tack all of my form variables on as a query string the third party URL?
<form id="contactform" name="contactform" onsubmit="return validateForm(this)" method="post" encType="multipart/form-data" action="https://thirdpartysite.com/db/?action=AddRecord&apptoken=xxx">
<input class="contactfield required contact_name_first" type="text" id="firstname" name="firstname" placeholder="FIRST NAME" />
<input class="contactfield required contact_name_last" type="text" id="lastname" name="lastname" placeholder="LAST NAME" />
<input class="contactfield required contact_org" type="text" id="organization" name="organization" placeholder="ORGANIZATION" />
<input class="contactfield required contact_email" type="text" id="email" name="email" placeholder="EMAIL" />
<input class="contactfield required contact_phone" type="text" id="phone" name="phone" placeholder="PHONE" />
<textarea class="contactfield required contact_msg" id="message" name="message" cols="40" rows="10" placeholder="HOW CAN WE HELP YOU?"></textarea>
<input type="hidden" name="rdr" value="http://www.mysite.com/thank-you" /><!-- Note: this gets passed to the third party site as the page to redirect back to after third party site receives the form data" -->
</form>

Categories