Javascript-Jqueryフォーム

Question

HTML/JSで基本的なフォームを作成します。 javascriptを使用してフィールドを確認しています。しかし、彼らは空き状況を確認するだけです。フィールドが正しくない場合はフォームを検証し、フィールドが正しくない場合は無効にする方法

多分私の検証機能（）を完了する必要があります。しかしどうですか？私は希望

var regex = /[^a-zA-Z]/; 
 
var regex2 = /[^a-zA-Z_]/; 
 

 

 
$(document).ready(function() { 
 

 
    var $nom = $('#name'), 
 
     $prenom = $('#prenom'), 
 
     $centre = $('#centre'), 
 
     $magasin = $('#magasin'), 
 
     $profil = $('#profil'), 
 
     $date = $('#date'), 
 
     $envoie = $('#envoie'), 
 
     $erreur = $('#erreur'), 
 
     $champ = $('.champ'); 
 

 
    /* FONCTION REGEX */ 
 

 
    $nom.keypress(function() { 
 
     var color = regex.test(this.value) ? "red" : "green"; 
 
     $(this).css({ 
 
      borderColor: color, 
 
      color: color 
 
     }); 
 
    }); 
 

 

 
    $prenom.keypress(function() { 
 
     var color = regex.test(this.value) ? "red" : "green"; 
 
     $(this).css({ 
 
      borderColor: color, 
 
      color: color 
 
     }); 
 
    }); 
 

 
    $profil.keypress(function() { 
 
     var color = regex2.test(this.value) ? "red" : "green"; 
 
     $(this).css({ 
 
      borderColor: color, 
 
      color: color 
 
     }); 
 
    }); 
 

 
    /* AUTRES FONCTIONS */ 
 

 
    function verifier(champ) { 
 
     if (champ.val() == "") { 
 
      $erreur.css('display', 'block'); 
 
      champ.css({ 
 
       borderColor: 'red', 
 
       color: 'red' 
 
      }); 
 

 
     } 
 
    } 
 

 

 

 
    $envoie.click(function (e) { 
 
     e.preventDefault(); 
 

 
     verifier($nom); 
 
     verifier($centre); 
 
     verifier($magasin); 
 
     verifier($profil); 
 
     verifier($prenom); 
 
     verifier($date); 
 

 
    }); 
 

 

 

 

 
    $centre.keypress(function() { 
 
     if($(this).val().length > 2){ 
 
      $(this).css({ 
 
       borderColor: 'red', 
 
       color: 'red' 
 
      }); 
 
     } 
 
     else{ 
 
      $(this).css({ 
 
       borderColor: 'green', 
 
       color: 'green' 
 
      }); 
 
     } 
 
    }); 
 

 
    $magasin.keypress(function() { 
 
     if($(this).val().length > 2){ 
 
      $(this).css({ 
 
       borderColor: 'red', 
 
       color: 'red' 
 
      }); 
 
     } 
 
     else{ 
 
      $(this).css({ 
 
       borderColor: 'green', 
 
       color: 'green' 
 
      }); 
 
     } 
 
    }); 
 

 
    $("#myForm").submit(function(e) { 
 
     //e.preventDefault(); 
 
     console.log("passage"); 
 
     if ($("#myForm input.invalid").length > 0) { 
 
      $("#logs").text("fail !"); 
 
      return false; 
 
     } 
 
     $("#logs").text("success !") 
 
     //return true; // laisse pour fonctionnement normal 
 
     return false; 
 
    }); 
 

 

 
});

Answer 1

検証フィールドは完全に自分自身を書き出すためのトリッキーなプロセスになることができます。（

は、事前にありがとう

JSを、私は少し失われています！ jQuery validateプラグインを強くお勧めします。

$(document).ready(function() { 
 

 
    $('#myform').validate({ 
 
     rules: { 
 
      fieldOne: { 
 
       required: true, 
 
       email: true 
 
      }, 
 
      fieldTwo: { 
 
       required: true, 
 
       minlength: 5 
 
      } 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 
 
<form id="myform"> 
 
    <input type="text" name="fieldOne"> 
 
    <input type="text" name="fieldTwo"> 
 
    <input type="submit" value="save"> 
 
</form>