Assign input value to JS variable

Question

Im trying to check if the user left the email input empty or if didnt include @ to it.

For some reason its not working

Note: The input is inside a span with a class called "email" and the form is a contact 7 form

var emaill = $('.email input').val();

if( emaill == '' || emaill.indexOf('@') == -1 ){

  text += "Your email address must contain “@” character <br>";
  $( ".error-popup" ).css("display","block");

}

That is the html:

<div role="form" class="wpcf7" id="wpcf7-f2358-p2317-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="2358">
<input type="hidden" name="_wpcf7_version" value="5.1.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2358-p2317-o1">
<input type="hidden" name="_wpcf7_container_post" value="2317">
<input type="hidden" name="g-recaptcha-response" value="">
</div>
<p><label class="name"> <span class="label"> Name * </span> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label class="email"> <span class="label"> Email * </span> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label class="phone"> <span class="label"> Phone * </span> <span class="wpcf7-form-control-wrap your-number"><input type="text" name="your-number" value="+974" size="40" maxlength="12" minlength="12" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label class="company"> <span class="label"> Company Name *</span> <span class="wpcf7-form-control-wrap your-comapny"><input type="text" name="your-comapny" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label class="position"> <span class="label"> Title/Position *</span> <span class="wpcf7-form-control-wrap your-position"><input type="text" name="your-position" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label id="business" class="business"> <span class="label"> Nature of Business *</span> <span class="wpcf7-form-control-wrap Category"><select name="Category" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Select">Select</option><option value="Importer">Importer</option><option value="Tax Warehouse Keeper">Tax Warehouse Keeper</option><option value="Local Producer">Local Producer</option></select></span> </label></p>
<p><label id="Industry" class="Industry"> <span class="label"> Industry *</span> <span class="wpcf7-form-control-wrap category"><select name="category" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Select">Select</option><option value="Oil &amp; Gas">Oil &amp; Gas</option><option value="Construction">Construction</option><option value="Retail">Retail</option><option value="Financial Services">Financial Services</option><option value="Hospitality">Hospitality</option><option value="Healthcare">Healthcare</option><option value="Education">Education</option><option value="Professional Services">Professional Services</option><option value="Entertainment">Entertainment</option><option value="News &amp; Media">News &amp; Media</option><option value="Other">Other</option></select></span> </label></p>
<div class="form-buttons">
<div id="news-submit"><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></div>
<p> <input type="reset" value="CLear" class="form-button"></p></div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

Possibly duplicate of [How to validate an email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Shubham Baranwal, Feb 14 '19 at 09:38
What is the `text` variable? What does your markup look like? What exactly isn't working? — James Coyle, Feb 14 '19 at 09:40
Why don't you just give your input the type "email" and add the `required` attribute. So you could check if its valid with: `$('.email input').get(0).checkValidity()` — Daniel Z., Feb 14 '19 at 09:40
What's not working with your code? It seems to be working for me — Nick Parsons, Feb 14 '19 at 09:42
That's a very clumsy e-mail validation, I must say. It even accepts single '@' character as a valid e-mail. Above in the comments it was suggested another topic with the answer that really seems to be way more efficient. — , Feb 14 '19 at 09:50

Mamun · Accepted Answer · 2019-02-14T09:52:07.363

The issue could be you are not updating the element .error-popup with text like:

$( ".error-popup" ).html(text);

$('.email input').on('input', function(){
  var emaill = $('.email input').val();
  var text = '';
  if( emaill == '' || emaill.indexOf('@') == -1 ){
    text += "Your email address must contain “@” character <br>";
    $( ".error-popup" ).html(text);
    $( ".error-popup" ).css("display","block");
  }
  else{
    $( ".error-popup" ).css("display","none");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div role="form" class="wpcf7" id="wpcf7-f2358-p2317-o1" lang="en-US" dir="ltr">
  <div class="screen-reader-response"></div>
    <form action="" method="post" class="wpcf7-form" novalidate="novalidate">
    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="2358">
    <input type="hidden" name="_wpcf7_version" value="5.1.1">
    <input type="hidden" name="_wpcf7_locale" value="en_US">
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2358-p2317-o1">
    <input type="hidden" name="_wpcf7_container_post" value="2317">
    <input type="hidden" name="g-recaptcha-response" value="">
    </div>
    <p><label class="name"> <span class="label"> Name * </span> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
    <p><label class="email"> <span class="label"> Email * </span> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
    <p><label class="phone"> <span class="label"> Phone * </span> <span class="wpcf7-form-control-wrap your-number"><input type="text" name="your-number" value="+974" size="40" maxlength="12" minlength="12" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
    <p><label class="company"> <span class="label"> Company Name *</span> <span class="wpcf7-form-control-wrap your-comapny"><input type="text" name="your-comapny" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
    <p><label class="position"> <span class="label"> Title/Position *</span> <span class="wpcf7-form-control-wrap your-position"><input type="text" name="your-position" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
    <p><label id="business" class="business"> <span class="label"> Nature of Business *</span> <span class="wpcf7-form-control-wrap Category"><select name="Category" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Select">Select</option><option value="Importer">Importer</option><option value="Tax Warehouse Keeper">Tax Warehouse Keeper</option><option value="Local Producer">Local Producer</option></select></span> </label></p>
    <p><label id="Industry" class="Industry"> <span class="label"> Industry *</span> <span class="wpcf7-form-control-wrap category"><select name="category" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Select">Select</option><option value="Oil &amp; Gas">Oil &amp; Gas</option><option value="Construction">Construction</option><option value="Retail">Retail</option><option value="Financial Services">Financial Services</option><option value="Hospitality">Hospitality</option><option value="Healthcare">Healthcare</option><option value="Education">Education</option><option value="Professional Services">Professional Services</option><option value="Entertainment">Entertainment</option><option value="News &amp; Media">News &amp; Media</option><option value="Other">Other</option></select></span> </label></p>
    <div class="form-buttons">
    <div id="news-submit"><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></div>
    <p> <input type="reset" value="CLear" class="form-button"></p></div>
    <div class="wpcf7-response-output wpcf7-display-none"></div></form>
  <div class="error-popup"></div>
</div>

Minor point - might want to use `.html()` if the error notification includes a `
`. — user7290573, Feb 14 '19 at 09:51

Assign input value to JS variable

1 Answers1