Validierungsfehler mit Bootstrap Tasten

Question

Ich bin neu in HTML/PHP/Javascript und die Bootstrap Rahmen ...

Hier ist mein Code:

<form name="Enquiry" method="post" action="query.php"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<h5>Choose search type:</h5> 
<div id="selector" class="btn-group"> 
    <button type="button" name="Surname" class="btn btn-default active">Surname</button> 
    <button type="button" name="IDNumber" class="btn btn-default">ID Number</button> 
    <button type="button" name="FileNumber" class="btn btn-default">File Number</button> 
</div> 
<br> 
<input id="searchbox" name="QD" type="text" size="20" maxlength="30" pattern="/[A-z]/g" title="0-Only alphabets allowed! No special characters or numbers. Please correct!"> 
<script> 
$('#selector button').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
    $getName = this.name; 

     switch ($getName) { 
      case "Surname": 
      document.getElementById('searchbox').value=""; 
      document.getElementById('searchbox').maxLength="30"; 
      document.getElementById('searchbox').pattern="/[A-z]/g"; 
      document.getElementById('searchbox').title="1-Only alphabets and spaces allowed. Please correct!";   
     break; 
      case "IDNumber": 
      document.getElementById('searchbox').value=""; 
      document.getElementById('searchbox').maxLength="13"; 
      document.getElementById('searchbox').pattern="\d+"; 
      document.getElementById('searchbox').title="2-Only numerical value allowed in the ID field! Please correct";    
     break; 
      case "FileNumber": 
      document.getElementById('searchbox').value=""; 
      document.getElementById('searchbox').maxLength="5"; 
      document.getElementById('searchbox').pattern="\d+"; 
      document.getElementById('searchbox').title="3-Only numerical value allowed in the file number field! Please correct";   
     } 
}); 
</script> 

<input type="submit" class="btn btn-primary" name="search" value="Query"> 
</form> 

Voll Code an: https://jsfiddle.net/o5n5ucm6/7/

Was ich versuche zu erreichen: Abhängig von der Schaltfläche, die ein Benutzer drückt, setze ich die Validierungskriterien eines Eingabetextfeldes mit Hilfe von Regxp und Maxlength usw.

Problem Im mit: Wenn ich auf die Abfrage-Schaltfläche (POST-Methode) klicken, auch wenn der Wert dem regxp entspricht, wird dennoch ein Fehler ausgelöst.

Jede Hilfe und Anregung?

Answer 1

Javascript ermöglicht Regex-Literale, so dass Sie Ihre Zeilen nicht zitieren müssen.

Ändern Sie diese Zeile: document.getElementById('searchbox').pattern="/[A-z]/g";

zu diesem: document.getElementById('searchbox').pattern=\[A-z]\g;

Die beiden Linien mit diesem: document.getElementById('searchbox').pattern="\d+";

Müssen diese geändert werden: document.getElementById('searchbox').pattern=\d+;