Validation error using Bootstrap buttons

Question

I am new to HTML/PHP/Javascript and the Bootstrap framework...

Here is my 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>

Full code at: https://jsfiddle.net/o5n5ucm6/7/

What I am trying to achieve: Depending on the button that a user presses, I set the validation criteria of an input text box using regxp and maxlength etc.

Problem Im having: When I click the query button (POST method), even if the value matches the regxp, it still throws an error.

Any help and suggestion?

Rashid 'Lee' Ibrahim · Accepted Answer · 2017-02-12 17:01:11Z

1

Javascript allows regex literals, so you don't need to quote your lines.

Change this line: document.getElementById('searchbox').pattern="/[A-z]/g";

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

The two lines with this: document.getElementById('searchbox').pattern="\d+";

Need to be changed to this: document.getElementById('searchbox').pattern=\d+;

answered Feb 12, 2017 at 17:01

Rashid 'Lee' Ibrahim

1,3921 gold badge9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rashid 'Lee' Ibrahim Over a year ago

Where does it throw the syntax error exactly? It works for me on this side when I use it.

Collectives™ on Stack Overflow

Validation error using Bootstrap buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related