pattern attribute of input tag is not working in only this form in HTML5

  Not single error is displayed while running the code. It is working well good if i am not using the pattern attribute in the input tag. But as I want user to enter only alpha or alphanumeric data I have used the pattern. For example in the field company name I have used pattern which allow only alphabet character but it is not allowing even 1 alphabet showing error message . I have also attached the link which shows you error message. Please help me I am stuck with the problem . I have used same pattern in different forms it is working properly.  

Not single error is displayed while running the code. It is working well good if i am not using the pattern attribute in the input tag. But as I want user to enter only alpha or alphanumeric data I have used the pattern. For example in the field company name I have used pattern which allow only alphabet character but it is not allowing even 1 alphabet showing error message . I have also attached the link which shows you error message. Please help me I am stuck with the problem . I have used same pattern in different forms it is working properly.

Asset and Sim Details

                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <!-- Nav tabs -->
                                                    <ul class="nav nav-pills">

                                                        <li><a href="#Asset-pills" data-toggle="tab">Asset</a>
                                                        </li>

                                                        <li><a href="#Sim-pills" data-toggle="tab">Sim</a>
                                                        </li>


                                                    </ul>

                                                    <!-- Tab panes -->
                                                    <div class="tab-content">

                                                        <div class="tab-pane fade in active" id="Asset-pills">
                                                            <div class="panel-body">
                                                                <div class="table-responsive">
                                                                    <form name = "form" id = "form_1"  action="store_asset.php" method = "POST" >
                                                                        <div class = "col-lg-12">

                                                                            <div class = "form-group">
                                                                                <label>Device Name</label>
                                                                                <select name = "device_name">
                                                                                    <option>Laptop</option>
                                                                                    <option>Mobile</option>
                                                                                    <option>Data Card</option>
                                                                                </select>
                                                                            </div>

                                                                            <div class = "form-group">
                                                                                <label>Company name</label>
                                                                                <input class = "form-control" name = "company_name"  pattern="[A-Za-z]{25}" type = "text"  id = "company_name" placeholder = "Enter Company name" title = "Please Enter company name of Device" required="required" >
                                                                            </div>

                                                                            <div class = "form-group">
                                                                                <label>Model Number</label>
                                                                                <input class = "form-control" name = "model_number" pattern="[A-za-z0-9]{25}" type = "text" id = "model_number"  placeholder = "Enter Model number" title = "Enter model number of Your Device " required="required">
                                                                            </div>

                                                                            <div class = "form-group">
                                                                                <label>OS version</label>
                                                                                <input class = "form-control" name = "os_version" pattern="[A-za-z0-9]{25}" id = "Os_versionid" placeholder = "Enter OS version detail" required="required"   />
                                                                            </div>
                                                                        </div>

                                                                        <div class = "col-lg-12">
                                                                            <button type = "submit"  class = "btn btn-primary" id = "submit" name = "sub" data-toggle = "modal" data-target = "#myModal">Submit</button>
                                                                            <button type = "reset" class = "btn btn-primary">Reset</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <div class="tab-pane fade" id="Sim-pills">
                                                            <div class="panel-body">
                                                                <div class="table-responsive">
                                                                    <form action="store_sim.php" method="POST">
                                                                        <div class="col-lg-12">
                                                                            <div class="form-group"><br>
                                                                                <label>Type</label>
                                                                                <select name="sim_type">
                                                                                    <option>Prepaid</option>
                                                                                    <option>Postpaid</option>
                                                                                </select>
                                                                            </div>

                                                                            <div class="form-group">
                                                                                <label>Simcard Number</label>
                                                                                <input class="form-control" name="simcard_no"   type="number" id="simcard_name" required="required" placeholder="Enter Simcard Number" title="Please Enter Simcard Number">
                                                                            </div>


                                                                            <div class="form-group">
                                                                                <label>Service Provider</label>
                                                                                <input class="form-control" name="service_provider"  type="text" id="service_provider" required="required" placeholder="Enter Service provider name" title="Enter Service provider name ">
                                                                            </div>




                                                                        </div>
                                                                        <div class="col-lg-12">
                                                                            <button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button>
                                                                            <button type="reset" class="btn btn-primary">Reset</button>
                                                                        </div>  
                                                                    </form>

                                                                </div>
                                                                <!-- /.table-responsive -->
                                                            </div>
                                                            <!-- /.panel-body -->
                                                        </div>                                  
                                                    </div>
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div>
                                        <!-- /.col-lg-12 -->
                                    </div>

                                </div>

                                <script src="../../bower_components/metisMenu/dist/metisMenu.min.js"></script>

                                <!-- DataTables JavaScript -->
                                <script src="../../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script>
                                <script src="../../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>

                                <!-- Custom Theme JavaScript -->
                                <script src="../../dist/js/sb-admin-2.js"></script>
                                <script>
                                    $(document).ready(function () {
                                        $('#dataTables-example').DataTable({
                                            responsive: true
                                        });
                                    });
                                </script>
                            </body>    
                        </html>

Link: showing problem with form.

https://drive.google.com/file/d/0B1rpCWtUcfePd1h4M2szVFRza0k/view?usp=sharing

Link:the pattern allows one charchter..(don’t know what problem is )
https://drive.google.com/file/d/0B1rpCWtUcfePTndnQTBrLWRkeUU/view?usp=sharing


Source: forms

Leave a Reply