How to do email field validatation with both a pattern and requiredness? - javascript

I have used the code below to validate an email field.
Email: ko.observable('').extend({
required: {
message: 'Email address is required.'
},
pattern: {
params: "^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
message: "Please enter a valid email address"
}
}),
Required validation is working when pattern is not there. However, I want email to be required as well as to follow a specific pattern as mentioned in a regular expression.
It is not working at the moment.

It works, but your pattern seems wrong, I took one of the internet and it works
http://jsfiddle.net/oefst8fa/
var vm = {
email: ko.observable('').extend({
required: true,
pattern: {
params: /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
message: "Please enter a valid email address"
}
})
};

Related

Error: Unknown rule type username in ReactJS

I am new to ReactJs, I am Using Ant-design For Registration Form and applied some validation Rules. I want to validate User when user enter something in fields, message ( Username must be Unique ) is shown to the user for guidance . But when I enter something Error is occur Unknown rule type username.
Code of Form
<FormItem>
{getFieldDecorator('username', {
rules: [
{
type: 'username',
message: 'Username Must be Unique!',
},
{
required: true,
message: 'Please Enter Your Username',
},
],
})(<Input placeholder="Username" />)}
</FormItem>
You must be confusing type with something else.
According to this page: https://ant.design/components/form/ , type will rather be referenced to something like string or boolean.
EDIT:
...
{
type: string,
message: 'Username Must be a string',
},
...

Validation Taking 5-10 sec on Form Submit

I have a very simple registration form only requiring a username, email, and password. I am trying to see why it takes 5-10sec to complete the registration after the user submits. I tried profiling on the server-end (see here), and have eliminated that as the problem.
It looks like my issue is the client-side validation. I am using the https://jqueryvalidation.org/ JS file plus another custom file that tells the user if they are trying to use a name or password that already exists:
$('.register-form').validate({
submitHandler: function(form){
$('.register-form').submit();
},
rules: {
password: {
required: true
},
tos: {
required: true
},
username: {
required: true,
remote: '/api/v1/users/username/'
},
email: {
required: true,
email: true,
remote: '/api/v1/users/email/'
},
},
messages: {
first_name: {
required: 'Please include your first name.'
},
last_name: {
required: 'Please include your last name.'
},
password: {
required: 'Please create a password'
},
tos: {
required: 'Please check that you agree to our TOS and Privacy Policy'
},
email: {
required: 'Please include your email.',
email: 'Please insert a valid email address.',
remote: 'This email is already in use.'
},
username: {
required: 'Please create a username.',
remote: 'This username is already in use.'
}
}
});
When I use Chrome's profiling (picture link), it looks like the problem is about 10sec of thousands of tiny tasks where register.js and the jquery.validator.js are calling each other. Specifically, its always submitHandler: function(form) line that is triggered on register.js. So I think I see the problem, but I am not clear on how to interpret it or fix it.
Any ideas? I am pretty new to using these validation plug-ins.
this line
$('.register-form').submit();
should read
form.submit();
so the function should look like this
$('.register-form').validate({
submitHandler: function(form) {
form.submit();
},
rules:...
});
other wise you keep recursively calling submit
from the documentation
Example: Use submitHandler to process something and then using the default submit. Note that "form" refers to a DOM element, this way the validation isn't triggered again.
https://jqueryvalidation.org/validate/

Jquery vaildation plugin multiple error in one field using localization

I'm using jquery validation plugin and need to use localization for different language.
The original code would be like this
$('#form').validate({
rules: {
'checkbox1[]': { required: true },
'email': { required: true,
email: true
},
},
messages: {
'checkbox1[]': "Please choose at least 3",
email: {
required:'Please input email',
email: 'Please input valid email'
}
}
});
If I use localization, my message_en.js would be:
$.extend($.validator.messages, {
required: "Please choose your answer.",
email: "Please input valid email.",
});
However, I shared the "required" message in email field. It means that if I didnt input email, the error message would become "Please choose your answer.". Obviously, it is not appropriate.
So, how can I separate the error message?

Is this a good practice object for diplaying messages?

It works, I've tested it. What I want to know is - is this good practice. Obviously I could have just used an associative array and called it. But I wanted to encapuslate it into an object with state.
var View_message = function(div)
{ this.messages =
{
empty: 'Please complete all fields',
empty_bm: 'Please enter both a title and url',
name: 'Only letters or dashes for the name field',
email: 'Please enter a valid email',
same: 'Please make emails equal',
taken: 'Sorry that email is taken',
pass: 'Please enter a valid password, 6-40 characters',
validate: 'Please contact <a class="d" href="mailto:support#archemarks.com">support</a> to reset your password',
url: 'Pleae enter a valid url'
};
this.div = div;
};
View_message.prototype.display = function(type)
{
document.getElementById(this.div).innerHTML=this.messages[type];
};
obj_view = new View_message('test_id')
obj_view.display('empty');
You will be creating a copy of this.messages for each instance of View_message. To prevent that, you could store the messages in the prototype.
Also, you are doing a lookup of the div every time you display a message. I'd store a reference to the div in the constructor instead.
function View_message (div)
{
this.div = document.getElementsById(div);
}
View_message.prototype.messages = {
empty: 'Please complete all fields',
empty_bm: 'Please enter both a title and url',
name: 'Only letters or dashes for the name field',
email: 'Please enter a valid email',
same: 'Please make emails equal',
taken: 'Sorry that email is taken',
pass: 'Please enter a valid password, 6-40 characters',
validate: 'Please contact <a class="d" href="mailto:support#archemarks.com">support</a> to reset your password',
url: 'Pleae enter a valid url'
};
View_message.prototype.display = function(type)
{
this.div.innerHTML = this.messages[type];
};
There's nothing wrong with the way you're doing it, but unless you have a lot more functions associated with those error messages, it seems a little overboard to create a prototype for it and instantiate a new object for it. You could implement the display method in one function that takes the type and the id as arguments.
function displayMessage(type, div) {
var msgs = {
empty: 'Please complete all fields',
empty_bm: 'Please enter both a title and url',
name: 'Only letters or dashes for the name field',
email: 'Please enter a valid email',
same: 'Please make emails equal',
taken: 'Sorry that email is taken',
pass: 'Please enter a valid password, 6-40 characters',
validate: 'Please contact <a class="d" href="mailto:support#archemarks.com">support</a> to reset your password',
url: 'Pleae enter a valid url'
};
document.getElementById(div).innerHTML = msgs[type];
}
If you call it a lot, you could even put the msgs structure into a closure so it doesn't have to be evaluated each time you call it.

How to change the content of "This field is required" in Jquery form validation plugin?

How can I change the general message of "This field is required" in Jquery form validation plugin to "このフィールドは必須です"? The color of the message can be changed by using the following code:
<style type="text/css">
label.error {color: red;}
</style>
But how to change the content?
I want to change all "This filed is required" messages.
I want to change all "required" messages to "このフィールドは必須です".
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
}
}
})
only changes specific message for specific rule and specific element.
I wrote
messages: {
required:"このフィールドは必須です"
}
but it doesn't work.
I tried the accepted answer and it did not work for me at all. I did more searching on Google and found this article.
Using this line of code solved my problem:
$.validator.messages.required = "Your new required message here!";
The messages object has several interesting attributes to adjust:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
...
}
See the source.
These can be set as defaults via the setDefaults() method:
$.validator.setDefaults({
messages: {
required: "このフィールドは必須です"
}
});
You can use the messages option in the validate method.

Categories