2017-03-23 8 views
0

を使用して検証する必要がある形式の電子メールフィールドに忘れてしまったボタンをクリックしてください私のコードの下のjQueryを使用して検証する必要があります忘れてしまっをクリックし任意の間違いが私を提案し、ログインページの画像を通じては、ボタンの形はjqueryの

login pages

を行く場合がありますケースには間違いが私を提案する場合は、以下に示すよう
<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"for="email">Name (required, at least 2 characters)</label> 
          <input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>" /> 
          <span class="text-danger"><?php echo form_error('email'); ?></span> 
         </div> 

         <div class="field-wrap"> 
          <label class="view-label"for="password">Password (required, at least 8 characters)</label> 
          <input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" /> 
          <span class="text-danger"><?php echo form_error('password'); ?></span> 


          <button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button> 


         </div> 


         <div class="field-wrap"> 
          <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button> 
         </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> 



$('#btn-show-forgot').click(function() { 
//     $('#forgot-email').attr('value', null); 
        $('.form-div').removeClass("active"); 
        $('#forgot-form').addClass("active"); 
        currentActiveId = "forgot-form"; 
        sessionStorage.setItem('activeDiv', currentActiveId);     
       }); 

jqueryの

<script> 
            $(document).ready(function() { 
           $("#form1").validate({ 
            rules: { 
             email: "required" 
            }, 
            messages: { 
             email: "Please specify your name" 

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

          }); 
            </script> 

答えて

1

あなたのコードは、あなたがJQuery Validate pluginライブラリを追加しました、私のために働いていますか?

(あなたのコード+スクリプトが含まれます)に従うを参照してください:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 
<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> 
 
    
 
</head> 
 
<body> 
 
<form id="form1" name="form1"> 
 
    <div class="field-wrap"> 
 
    <label class="view-label"for="email">Name (required, at least 2 characters)</label> 
 
    <input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value="" /> 
 
    <span class="text-danger"></span> 
 
    </div> 
 

 
    <div class="field-wrap"> 
 
    <label class="view-label"for="password">Password (required, at least 8 characters)</label> 
 
    <input type="password" placeholder="Password" name="password" id="password" value="" /> 
 
    <span class="text-danger"></span> 
 

 

 
    <button type="button" id="btn-show-forgot" name="btn-show-forgot">Forgot ?</button> 
 

 

 
    </div> 
 

 

 
    <div class="field-wrap"> 
 
    <button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button> 
 
    </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> 
 

 

 
</body> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#form1").validate({ 
 
     rules: { 
 
      email: "required" 
 
     }, 
 
     messages: { 
 
      email: "Please specify your name" 
 

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

 
    }); 
 
    </script> 
 
</html>

あなたはjQueryの検証のためにこれを含める必要があります:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
+0

先生、あなたのコードが動作しているあなたに感謝が、忘れたボタンをクリックした後、上記のページをリセットするページがリダイレクトされません。スクリプトを追加します。 –

+0

PHPの部分を削除しました。それらを再導入する。 – Alessandro

0

は、デモ作業

$(document).ready(function() { 
$("#form1").validate({ 
    rules: { 
     "name": { 
      required: true, 
      minlength: 2 
     }, 
     "email": { 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     "name": { 
      required: "Please, enter a name" 
     }, 
     "email": { 
      required: "Please, enter an email", 
      email: "Email is invalid" 
     } 
    }, 
    submitHandler: function (form) { // for demo 
     alert('valid form submitted'); // for demo 
     return false; // for demo 
    } 
}); 

}); 

jQueryの

HTML

<form id="form1" method="post" action="#"> 
<label for="name">Name</label> 
<input type="text" name="name" id="name" /> 
<label for="email">Email</label> 
<input type="email" name="email" id="email" /> 
<button type="submit">Submit</button> 
</form> 

このコードを試してみてください - http://jsfiddle.net/amwmedia/sw87W/

関連する問題