locked
How to accept only English letters and numbers without no spaces between them and no whitespace at the beginning and the ending? RRS feed

  • Question

  • User-2071692902 posted
    Hi all,
    I have an input text assign for putting username. So I want as explained in title to know How to accept only English letters and numbers without no spaces between them and no whitespace at the beginning and the ending?

    Any help will be appreciated
    Sunday, November 4, 2018 9:38 PM

Answers

  • User839733648 posted

    Hi Omanxp45-1,

    The key point is to use the function regex.test() to check the input string.

    For more about this, you could refer to: RegExp.prototype .test()

    I've made an easy sample using Javascript and you could refer to:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            function Test() {
                var txtvalue = document.getElementById("inputtxt").value;
                var regex = new RegExp("^[A-Za-z]+$");
                if (regex.test(txtvalue)) {
                    document.getElementById("msg").innerHTML = "true";
                }
                else {
                    document.getElementById("msg").innerHTML = "false";
                }
            }            
        </script>
    </head>
    <body>
        <input type="text" id="inputtxt" />   
        <span id="msg"></span><br />
        <input type="button" id="inputbtn" value="test" onclick="Test();"/>
    </body>
    </html>

    result:

    Besides, I want to recommend the Jquery Pluign I mentioned above because it is more functional and expressive.

    The validator has been packaged in this way.

    The following is the main code and the comment I‘ve added.

        <script>
            $(document).ready(function () {
                $('#regexpForm').bootstrapValidator({
                    feedbackIcons: {//prompt icon
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        fullName: {
                            container: "#errormsg",//the id of the checking object
                            validators: {
                                regexp: {//regular check
                                    regexp: /^[A-Za-z]+$/,
                                    message: 'Error Input'//the error messgae
                                }
                            }
                        }
                    }
                });
            });
        </script>

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 6, 2018 2:00 AM

All replies

  • User839733648 posted

    Hi Omanxp45-1,

    According to your description, I suggest that you could use Regex to check the value in the input box.

    You could set the regex as /^[A-Za-z]+$/

    • ^ - Start
    • [A-Za-z]+ - One or more letters
    • $- End

    For more about Regex, you could refer to the link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-asterisk 

    Besides, I suggest that you could use bootstrapvalidator to check the content.

    The documention you could refer to: http://bootstrapvalidator.votintsev.ru/getting-started/ 

    I've made a sample on my side and hope this will be helpful to you.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#regexpForm').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        fullName: {
                            container: "#errormsg",
                            validators: {
                                regexp: {
                                    regexp: /^[A-Za-z]+$/,
                                    message: 'Error Input'
                                }
                            }
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="regexpForm" class="form-horizontal">
            <div class="form-group">
                <label for="inputtxt" class="col-sm-1 control-label">Input</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="fullName" />
                </div>
                <div id="errormsg" class="control-label col-sm-1">
                    <span class="help-inline pull-left"></span>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    Monday, November 5, 2018 3:03 AM
  • User-2071692902 posted

    Thank you. But I am know to the java script and I do,t know anything about jQuery.

    So if you do,t mind could you please simplify this code to me and write it in java script ?

    Thanks a lot advance

    Monday, November 5, 2018 10:17 AM
  • User839733648 posted

    Hi Omanxp45-1,

    The key point is to use the function regex.test() to check the input string.

    For more about this, you could refer to: RegExp.prototype .test()

    I've made an easy sample using Javascript and you could refer to:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            function Test() {
                var txtvalue = document.getElementById("inputtxt").value;
                var regex = new RegExp("^[A-Za-z]+$");
                if (regex.test(txtvalue)) {
                    document.getElementById("msg").innerHTML = "true";
                }
                else {
                    document.getElementById("msg").innerHTML = "false";
                }
            }            
        </script>
    </head>
    <body>
        <input type="text" id="inputtxt" />   
        <span id="msg"></span><br />
        <input type="button" id="inputbtn" value="test" onclick="Test();"/>
    </body>
    </html>

    result:

    Besides, I want to recommend the Jquery Pluign I mentioned above because it is more functional and expressive.

    The validator has been packaged in this way.

    The following is the main code and the comment I‘ve added.

        <script>
            $(document).ready(function () {
                $('#regexpForm').bootstrapValidator({
                    feedbackIcons: {//prompt icon
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        fullName: {
                            container: "#errormsg",//the id of the checking object
                            validators: {
                                regexp: {//regular check
                                    regexp: /^[A-Za-z]+$/,
                                    message: 'Error Input'//the error messgae
                                }
                            }
                        }
                    }
                });
            });
        </script>

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 6, 2018 2:00 AM
  • User-2071692902 posted

    Perfect, thanks a lot . It did what you said it will.

     var userName = document.getElementById("myUserName").value;
              var src = document.getElementById("myInput").value;
              var dest = document.getElementById("conBox");
                var regex = new RegExp("^[A-Za-z0-9]+$");
                if (regex.test(userName)) {
               dest.value += userName + ":" + src + "\n";
    
                } else {
     alert ("Please Enter Your Username To Start The Chat,Only Englisg Letter And Numbers Allowed Without Spaces In Username Field");
                    document.getElementById("myUserName").value = "";
                    document.getElementById("myUserName").focus();
    
                }

    Tuesday, November 6, 2018 10:23 AM