将输入值分配给JS变量

时间：2019-02-14 09:36:58

标签： javascript jquery

我正在尝试检查用户是否将电子邮件输入留空或是否不包含@。

由于某种原因它不起作用

注意：输入是在跨度内的，该跨度包含一个名为“ email”的类，并且该表单是联系人7表单

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

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

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

}

那是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>

1 个答案:

答案 0 :(得分：0)

问题可能是您没有像这样用.error-popup更新元素text：

$( ".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>

相关问题
最新问题