忘れボタン（hrefリンク）の電子メールフィールドを有効にするには、javacript

Question

をクリックしてください。忘れたボタンをクリックすると、電子メールフィールドが有効になるはずです。役に立った

スクリプト

JS/testing.js ">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 



<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
Did you omit follow library? 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $("#form1").validate({ 
     rules: { 
      email: "required" 
     }, 
     messages: { 
      email: "Please specify your name" 

     } 
     }) 
     $('#btn-show-forgot').on('click', function() { 
     $("#form1").valid(); 
     }); 

    }); 
    </script> 

形態

<form id="form1" name="form1" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" > 

         <div class="field-wrap"> 
          <label class="view-label">Email Address</label> 
          <input type="email" placeholder="Email Address" name="email" id="email" class="input-control inputstyle" value="<?php echo set_value('email'); ?>"/> 
          <span class="text-danger"><?php echo form_error('email'); ?></span> 
         </div> 
         <!--<div id='errorDiv' class='col-xs-12 pull-right'> </div>--> 
         <div class="field-wrap"> 
          <input type="password" placeholder="Password" class="inputstyle" name="password" id="password" value="<?php echo set_value('password'); ?>"/> 
          <span class="text-danger"><?php echo form_error('password'); ?></span> 

          <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a> 

         </div> 

         <!--<div id='errorDivv' class='col-xs-12 pull-right'> </div>--> 
         <div class="field-wrap"> 
          <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button> 
          <?php 
          if (isset($message)) { 
           echo $message; 
          } 
          ?> 
         </div> 
         <div class="field-wrap"> 
          <a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a> 

         </div> 

        </form> 

Answer 1

修飾スクリプト

<script> 
var validateEmail = function(elementValue) { 
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; 
    return emailPattern.test(elementValue); 
} 

$('#btn-show-forgot').click(function() { 
    var value = $('#email').val(); 
    var valid = validateEmail(value); 
    if (!valid) { 
     alert("Please enter a valid email");   
     return false; 
    } 
}); 

$('#email').keyup(function() { 

    var value = $(this).val(); 
    var valid = validateEmail(value); 

    if (!valid) { 
     $(this).css('color', 'red'); 
    } else { 
     $(this).css('color', '#000'); 
    } 

}); 
</script>