So I'm trying to display a form only when a valid email address is entered.
<p>Email:</p>
<input name="User_Email" type="text"/>
<div id="outform">
<p>Company Name:</p>
<input type="text" name="CompanyName"/>
<p>Website:</p>
<input type="text" name="Website" />
<input type='submit'>
</div>
I first got the remainder of the form only to display if there was a value in the field with this:
<script>
$('input[name=User_Email]').keyup(function(){
if($(this).val().length)
$('#outform').show();
else
$('#outform').hide();
});
</script>
Which worked as expected, then I tried this which I can't get to work:
<script>
if $('input[name=User_Email]').is(':valid') {
$('#outform').show();
else
$('#outform').hide();
}
</script>
If anyone could help me udnerstand this isn't hitting the .is(':valid') clause it would be much appriciated.
Firstly, You should add required
attribute into input
Like this
<input name="User_Email" type="text" required/>
More detail you can read https://css-tricks.com/almanac/selectors/v/valid/
Secondly, Your syntax is incorrect here line 1
if $('input[name=User_Email]').is(':valid') {
$('#outform').show(); // line 1
else // line 2
$('#outform').hide(); // line 3
} // line 4
It should close right after line 1
instead line 4
here
if $('input[name=User_Email]').is(':valid') {
$('#outform').show(); } // line 1
else // line 2
$('#outform').hide(); // line 3
// line 4
Live demo below to check the result.
Updated
Change to the type of email field from text
to email
input name="User_Email" type="email" required/>
You can also use Regex
like rneviu's answer
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
// Should hide default
$('#outform').hide();
$('input[name=User_Email]').keyup(function(){
var isValid = $(this).is(':valid') && validateEmail($(this).val());
if (isValid)
$('#outform').show();
else
$('#outform').hide();
});
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Email:</p>
<input name="User_Email" type="email" required/>
<div id="outform">
<p>Company Name:</p>
<input type="text" name="CompanyName"/>
<p>Website:</p>
<input type="text" name="Website" />
<input type='submit'>
</div>