Validation for inputs in jquery using regex

Question

i was creating a simple form which has two inputs Name and Email on submit if i write numbers in name input then it will show number is not allowed message as like required message same as in email

Fiddle:https://jsfiddle.net/p6ohxxxe/

please help me out of this problem your help will be appreciated

HTML

 <div class="form-container">
        <form action="" id="my-form" name="myForm">
            <div class="form-row">
                <div class="input-container">
                    <label for="name" class="form-label">Name:</label>
                    <input type="text" class="form-input" name="name" placeholder="Enter your Name">
                </div>
            </div>
            <div class="form-row">
                <div class="input-container">
                    <label for="Email" class="form-label">Email:</label>
                    <input type="text" class="form-input" name="email" placeholder="Enter your Email">
                </div>
            </div>
            <div class="form-row">
                <div class="input-container">
                    <button type="submit" class="btnSubmit" >Submit</button>
                </div>
            </div>
        </form>
    </div>

js

$("form[name='myForm']").validate({
        rules: {
            name:"required",
            email:{
                required:true,
                email:true
            }
        },
        messages:{
            name:"please Enter your Name",
            email:"Please Enter a valid Email Address"
        },
        submitHandler: function(form) {
            form.submit();

        }
    });

css

.form-container{
    position: relative;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background: rgba(40, 91, 255, 0.24);
    margin:30px auto;
    max-width: 50%;
}
.input-container{
    width: 100%;
    height:auto;
    padding-bottom: 12px;
}
.form-label{
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 15px;
    display: block;
    color:#000;
}
.form-input{
    display: block;
    width: 50%;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
    position: relative;
    width:100%;
    padding: 14px;
}
.btnSubmit{
    padding: 10px 40px;
    position: relative;
    background: #31708f;
    border-radius: 5px;
    outline: none;
    box-shadow: none;
    color: white;

}
.error{
    color:red;
    border-color: red;
    padding: 3px 2px;
}

simplest validation would be add required and change email input to type="email" like here jsfiddle.net/p6ohxxxe/1 if you want to show error message under each box then either use some library or do it manually refer here stackoverflow.com/questions/25572882/… — Vinod Louis
– Vinod Louis, Commented Apr 18, 2017 at 10:48
but i want full validation with name also in which we use regex @vinod louis. That thing i already did — Mujtaba Hussain Bhat
– Mujtaba Hussain Bhat, Commented Apr 18, 2017 at 11:28

Giovan Cruz · Accepted Answer · 2017-04-18 11:58:39Z

0

I dont know if I understand your question, but using the validate plugin, you can create additional validation rules and use regex as the validation parameter. I'm using this code:

jQuery.validator.addMethod("regex", function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
},"Invalid Data");

And input:

<input required="" data-rule-regex="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" title="Enter a valid IPV4" name="ip" type="text">

answered Apr 18, 2017 at 11:58

Giovan Cruz

73110 silver badges22 bronze badges

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

2 Comments

Mujtaba Hussain Bhat Over a year ago

can you please update my fiddle your help will be appericiated

Giovan Cruz Over a year ago

@MujtabaHussainBhat It is very simple, the code I posted is well summarized, just call the external resources: jsfiddle.net/sparhawk_odin/p6ohxxxe/9 Dont forget to mark this as an accepted answer

Collectives™ on Stack Overflow

Validation for inputs in jquery using regex

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related