Develop Reference

Custom message show in simple-react-validator library

I want to show my custom error message
this.validator = new SimpleReactValidator({
messages: {
email: "Invalid mail Id",
// OR
// will override all messages
},
});
My input tag is
<input type="text" className="form-control" id="email" placeholder="Email" required="" name="email" value={email} onChange={this.handelChange}
/>
{this.validator.message('email', email, 'required|email')}
I want to show my error message "Invalid email Id",
Please any one help me, Thanks

After submit, you need to use this.validator.showMessages() to show the error messages. Also make sure to re-render the form/component somehow so that the errors are displayed.
I have created a working example in the codesandbox for you.
Also, See the docs

You can add a custom message for your input by doing the following
const validator = new SimpleReactValidator({
validators: {
med_docs: {
required: true,
message: 'Please upload a valid medical document.',
rule: (val, params, validatorP) => !!(val && val.length > 0),
},
},
Here you can customise the rule and add whatever validation you want
The above rule that I have added is to check if the medical doc array has some value

how to take value from input with vue.js?

I need some enlightenment.
Right now, I'm learning vue.js, and I want to know how to take all data value from input form?? I want take all data from there & save into my database. But, I still don't know, how to get all these data.. thx
<div id="example-1">
<form>
<input v-model="info.name">
<input v-model="info.nickname">
<input v-model="info.gender">
<input type="submit" name="" value="Submit" v-on:click="submitData">
</form>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
info: {
name: '',
nickname: '',
gender: ''
}
}
},
methods: {
submitData: function() {
console.log(this.info);
// this.$http.post('/api/something', JSON.stringify(this.info));
}
})
</script>

I bet you need to prevent the default action. When you submit a form, the page automatically reloads. You won't ever see a response from the server in the console because it will clear when the page refreshes after the submission action.
Go here, and ctrl + f 'Event Modifiers'. You'll want to use .prevent in this case, then write your own code to handle the submission / response.

How do I submit a real-time validated form with Semantic UI and Meteor?

I have run into a huge problem with my form, which I validate in real time using Semantic UI.
The HTML:
<form class="ui form pin-form">
<div class="field">
<label>Email</label>
<input placeholder="name#example.com" name="email_input" type="text">
</div>
<div class="ui buttons">
<input type="submit" class="ui submit positive disabled button login-button" value="Log in">
</div>
</form>
I added the <form> tag myself and made the submit into an input so that I could access the regular submit form.
The real time validation comes from Semantic UI and a Meteor package: https://github.com/avrora/live-form-validator
On template render I do this:
if (!this._rendered) {
this._rendered = true;
pinForm = $('.ui.form.pin-form');
pinForm.form({
my_text_input: {
identifier: 'email_input',
rules: [
{
type: 'empty',
prompt: 'Type your email address'
},
{
type: 'email',
prompt: 'This is not yet a valid email address'
}
]
}
},
{
inline: true,
on: 'blur',
transition: 'slide down',
onSuccess: function () {
var submitButton = $('.ui.submit.button')
submitButton.removeClass('disabled')
return false
},
onFailure: function() {
var submitButton = $('.ui.submit.button')
submitButton.addClass('disabled')
}
})
}
The big problem here is that with return false it doesn't submit the form at all even when click the submit button, and without it it submits the form in real time, which I don't want!
Can anyone see a workaround or do I need to switch validation somehow?

If you want to do a Meteor.call, you could try doing it in the onSuccess function. The package does ask you to save the data manually within the onSuccess function.
The following code logged the email twice.
onSuccess: function () {
console.log("Email: ", $("input[name=email_input]").val());
// Submit your form here using a Meteor.call maybe?
return false;
},
You could alternatively look at aldeed:autoform for handling forms in Meteor.

This could be the stupidest question on all of SO. (Don't worry, I asked the question so I'm only dissing myself!)
Semantic UI literally provides the on: change setting, which will validate the form in real time instead of on: blur which it is set to now.
Oh, man...

Select method is not validated dynamically

I am using a select method in form and when I click on submit method without filing the form, various errors are shown which I have included in validate methods, like first name required, email required, etc.
So the problem is when I start entering the first name, the error disappears. But the same is not happening in case of select method. When I select certain options there, the error still remains saying, select at least one option. This error goes away when I click submit button. But I want this error to go away when I select at least one option, like in the case of first name when I start typing, the error goes away.
I have included my validation methods in $(document).ready(function()
Any help will be appreciated.
The following is the code snippet:
var newusercontainer = $('#newUsererrorcontainer');
var newuservalidator = $("#newUserForm").validate({
submitHandler: function(form) {
registerUser();
},
errorContainer: newusercontainer,
errorLabelContainer: $("ul", newusercontainer),
wrapper: 'li',
meta: "validate",
rules: {
newUserFirstName: {
required:true,
maxlength:50,
},
sector: {
required: true,
},
},
messages: {
newUserFirstName: {
required: "The First name field is required.",
maxlength: "Please enter with in 60 characters"
},
sector: {
required: "The Sector field is required.",
},
}
});

How to exempt element to be validated?

I'm using the validation plugin for jquery:
http://docs.jquery.com/Plugins/Validation.
I want to know how would I exempt a field to be validated? Currently all fields inside the form are automatically checked.
I am not sure if this will help since the element that I want to exempt is not included (obviously :) )
$("#contactForm").validate({
rules: {
first_name:{required: true,charsonly:true,minlength: 1 },
last_name:{required:true,charsonly:true,minlength: 1 },
birthday:{required:true,min:1,max:31 },
birthmonth:"required",
birthyear:"required",
username: {required: true,minlength:1,maxlength:32,username:true,notChinese:true,noSpecial:true},
password1:{required:true,minlength: 5,maxlength: 10, alphaNum: true },
password2:{required:true,minlength: 5,maxlength: 10, alphaNum: true, equalTo: "#password1"},
currency:"required",
address:{required: true,noSpecial:true,minlength:2},
city:{required: true,noSpecial:true,minlength:2},
state:{noSpecial:true},
countrycode:"required",
zip:{required:true,zipTest:true},
email:{required:true,email: true},
confirmemail:{required: true,equalTo: "#email",email:true},
phone:{required: true,minlength:6,maxlength:20,phoneUS:true},
cellphone:{required: true,minlength:6,maxlength:20,phoneUS:true},
custom06:{acceptIM:true}
} });
Found it.
I used the ignore validation method.
Here's the code
$("#myform").validate({
ignore: ".ignore"
})

It depends on class attribute. See examples:
This field is required and email format: it cannot be empty
input class="required email"
This field is NOT required and email format: it can be empty
input class="email"
This field is NOT required and doesnt have format: it can be empty
input class=""

Are you using some sort of server side technology? The validation library needs to have rules set, and if you are doing this in strictly javaScript (jQuery) it is manual.
UPDATE: You can remove rules with the following: http://docs.jquery.com/Plugins/Validation/rules#.22remove.22rules
Place the following at the end of the body.
$("selector").rules("remove");

You could set your own messages:
$("#contactForm").validate({
rules: {
input1: required,
input2: required,
no-validation: required,
input4: required,
},
messages: {
no-validation: ''
}
});
Just put an empty string for the field you don´t want to show any message for..