<div class="form-group" id="q-row5">
<div class="row">
<div class="col-sm-5 has-feedback">
<label for="preferContact" class="control-label">Preferred Contact Method *:</label>
<div>
<input class="control-label" id="Phone call" name="preferedContact[]" type="checkbox" value="1">
<label for="Phone call">Phone call</label>
</div>
<div>
<input class="control-label" id="Text" name="preferedContact[]" type="checkbox" value="2">
<label for="Text">Text</label>
</div>
<div>
<input class="control-label" id="Email" name="preferedContact[]" type="checkbox" value="3">
<label for="Email">Email</label>
</div>
<div>
<input class="control-label" id="Any" name="preferedContact[]" type="checkbox" value="4">
<label for="Any">Any</label>
</div>
</div>
<div class="col-sm-7 has-feedback">
<label for="messageType" class="control-label">What type of message may we leave when we contact you? *:</label>
<div style="">
<input class="control-label" id="messageTypeValDiscreet" name="messageTypeVal" type="radio" value="1">
<label for="messageTypeValDiscreet">Discreet</label>
</div>
<div style="">
<input class="control-label" id="messageTypeValAny" name="messageTypeVal" type="radio" value="2">
<label for="messageTypeValAny">Any</label>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#enrollForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok icon-success',
invalid: 'glyphicon glyphicon-remove icon-fail',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
messageTypeVal: {
row: '.col-sm-7',
validators: {
notEmpty: {
message: 'Message type is required'
}
}
},
'preferedContact[]': {
row: '.col-sm-5',
validators: {
choice: {
min: 1,
message: 'Please choose prefered contact atleast 1'
}
}
}
}
});
});
</script>
attached image
My question is for the last options in both checkbox & radio button the label only is diplayed, the radio button and the checkbox is not displayed in both. I have attached the image. Please let me know what is the issues in code. If i remove the validation it works else it not working properly.
Related
I am trying to empty the form after it submits form but I am unable to do this. Here is the code
<form class="form-horizontal" #submit.prevent="addtodirectory" id="form-directory">
<div class="model-body">
<div class="card-body">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input v-model="form.name" type="text" name="name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<textarea v-model="form.address" type="text" name="address"
class="form-control" :class="{ 'is-invalid': form.errors.has('address') }"></textarea>
<has-error :form="form" field="address"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Profession</label>
<div class="col-sm-10">
<input v-model="form.profession" type="text" name="profession"
class="form-control" :class="{ 'is-invalid': form.errors.has('profession') }">
<has-error :form="form" field="profession"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Contact Number</label>
<div class="col-sm-10">
<input v-model="form.contact_number" type="text" name="contact_number"
class="form-control" :class="{ 'is-invalid': form.errors.has('contact_number') }">
<has-error :form="form" field="contact_number"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">City</label>
<div class="col-sm-10">
<input v-model="form.city" type="text" name="city"
class="form-control" :class="{ 'is-invalid': form.errors.has('city') }">
<has-error :form="form" field="city"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">State</label>
<div class="col-sm-10">
<select v-model="form.state" type="text" name="state"
class="form-control" :class="{ 'is-invalid': form.errors.has('state') }">
<has-error :form="form" field="state"></has-error>
<option value="Rajasthan">Rajasthan</option>
<option value="Gujrat">Gujrat</option>
</select>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-success">Submit</button>
<button type="submit" class="btn btn-default float-right">Cancel</button>
</div>
<!-- /.card-footer -->
</div>
</form>
<script>
export default {
data() {
return {
news:{},
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
}
},
methods: { addtodirectory() {
this.$Progress.start();
this.form.post('api/addtodirectory');
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
$('#form-directory input[type="text"]').val('');
this.$Progress.finish();
}
}
I am using vform plugin to submit the form. Using Laravel as backend. The data is being submitted in database but I am not able to clear the form. please help in this regarding. Should I use jquery or javascript to clear the form? I tried different ways but I could not figure out the problem.
Simply empty your form object after form submit.
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
Well it was simple and I did following code for emptying the form.
addtodirectory(event) {
this.$Progress.start();
this.form.post('api/addtodirectory');
// document.getElementById("form-directory").reset();
console.log('durgesh');
// document.getElementsByName('name').value = '';
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";
this.$Progress.finish();
},
after submitting the form I did not used the form. so after doing this I emptied the form.
Or in a one-liner:
Object.keys(form).forEach(v => form[v] = "")
instead of:
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";
I want to validate varios steps in a wizard, without validating all inputs, when clicking on the next button. When clicking on the next button it should fire the function to validate the input fields of the first step. Then in the next step the input fields of the second step and so on. The next button is no submit button.
<tab-content title="Company" icon="fas fa-building" :before-change="validateThirdStep">
<div class="col-md-8 offset-md-2">
<label class="col-form-label text-md-right">Do you have a chicken?</label>
<div class="form-goup row">
<div class="col-md-7">
<input type="radio" name="dsb" id="radios" value="yes" v-model="pickeddsb">Yes
<input type="radio" name="dsb" id="radios" value="no" v-model="pickeddsb">No
</div>
</div>
</div>
<div class="form-group" v-if="pickeddsb=='yes'">
<div class="col-md-8 offset-md-2">
<h4>Data</h4>
</div>
<div class="col-lg-8 m-auto">
<!-- Name -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
<div class="col-md-7">
<input
v-model="namedsb"
v-validate="'required|namedsb'"
:class="{ 'has-error': errors.has('namedsb') }"
type="text"
name="namedsb"
>
{{ errors.first('namedsb') }}
</div>
</div>
<!-- Firm -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('companyname') }}</label>
<div class="col-md-7">
<input
v-model="firm"
v-validate="'required|firmdsb'"
:class="{ 'has-error': errors.has('firmdsb') }"
class="form-control"
type="text"
name="firmdsb"
>
{{ errors.first('firmdsb') }}
</div>
</div>
<!--Telephone-->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{$t('telephone')}}</label>
<div class="col-md-7">
<input
v-model="telephonedsb"
v-validate="'required|telephonedsb'"
:class="{ 'has-error': errors.has('telephonedsb')}"
class="form-control"
type="tel"
name="telephonedsb"
>
{{ errors.first('telephonedsb') }}
</div>
</div>
<!-- Email -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
<div class="col-md-7">
<input
v-model="emaildsb"
v-validate="'required|emaildsb'"
:class="{ 'has-error': errors.has('emaildsb') }"
class="form-control"
type="email"
name="emaildsb"
>
{{ errors.first('emaildsb') }}
</div>
</div>
</div>
</div>
</tab-content>
export default {
data() {
return {
namedsb: "",
telephonedsb: "",
emaildsb: "",
namere: "",
telephonere:"",
emailre: "",
}
},
methods: {
validateThirdStep: function() {
this.$validator.validate('namedsb', this.namedsb);
this.$validator.validate('firmdsb', this.firmdsb);
this.$validator.validate('telephonedsb', this.state);
this.$validator.validate('emaildsb', this.emaildsb);
}
}
}
It's fairly easy with the built-in scopes of VeeValidate, you can read about it on this page: enter link description here
A simple explanation is to add a specific scope for each tab/step, by adding this on the fields:
data-vv-scope="step1"
And then use this method when pressing the button for validation:
methods: {
validateForm(scope) {
this.$validator.validateAll('step1').then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}
I am learning Vue.js I have successfully made this registration form and its working fine
but I'm having a problem in showing errors.
register.vue page
<form #submit.prevent="RegisterUser" aria-label="Register">
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
<div class="col-md-6">
<!-- <input id="name" v-model="name" type="text" class="form-control" name="name" value="" required autofocus> -->
<input type="text" v-model="name" class="form-control" required="required" autofocus="autofocus">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Email Address</label>
<div class="col-md-6">
<!-- <input id="email" v-model="email" type="email" class="form-control" name="email" value="" required> -->
<input type="email" v-model="email" required autofocus class="form-control">
{{ errors.email }}
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<!-- <input id="password" v-model="password" type="password" class="form-control" required> -->
<input type="password" v-model="password" class="form-control" required>
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>
<div class="col-md-6">
<!-- <input id="password-confirm" v-model="password_confirmation" type="password" class="form-control" required> -->
<input type="password" v-model="confirm_password" class="form-control" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
Register
</button>
</div>
</div>
</form>
This is my scripts in register.vue page working registration fine
<script>
export default {
// props: ['name'],
data: function() {
return {
name: '',
email: '',
password: '',
confirm_password: '',
errors: {},
};
},
methods: {
RegisterUser() {
axios.post('/register', {
name: this.name,
email: this.email,
password: this.password,
password_confirmation:this.confirm_password
})
.then(function(response){
swal({
title: "Good job!",
text: "Login Success",
icon: "success",
button: "Okay",
})
.then((willDelete) => {
if (willDelete) {
window.location.href = '/home';
}
});
})
.catch(function (error) {
console.log(error.response.data);
});
}
}
}
</script>
This is the Errors I want to fetch...
How to fetch and how this errors on my vue components?
Note!! This solution is based on ES6 so you might have to transpile this to ES5
I had this issue a while back so I wrote a simple class to help manage validation messages from the server. https://gist.github.com/nonsocode/e6f34a685f8be1422c425e3a20a69a4b
You can use it by importing this to your template
import ErrorBag from 'path-to-errorbag-class'
and use it in your data method like so
data: function() {
return {
name: '',
email: '',
password: '',
confirm_password: '',
errors: new ErrorBag,
};
},
In your template, you can check if there's a validation error and then decide how you ant to handle it. I'll assume you're using bootsrap 4
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Email Address</label>
<div class="col-md-6">
<input type="email" v-model="email" required autofocus :class="{'form-control': true, 'is-invalid': errors.has('email')}">
<div class="invalid-feedback" v-if="errors.has('email')" >{{ errors.first('email') }}</div>
</div>
</div>
in the catch method of your ajax request,
axios(...)
.then(...)
.catch(function (error) {
if (error.response && error.response.status == 422) {
const errors = err.response.data.errors;
this.errors.setErrors(errors);
}
});
After successfully submitting to your server, you can call the clearAll method on the errorbag to clear all errors from the bag
I am trying to check by default the Mrs radio button... but it does not work ... I also tried to add a checked attribute wo any success //
what could be wrong with my coding ?
<div class="col-lg-9">
<form>
<!-- Full name -->
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<div class="input-group-text pb-0">
<label class="form-group-label active"><input v-model="gender" type="radio" value="Mrs"> Mrs</label>
</div>
<div class="input-group-text pb-0">
<label><input v-model="gender" type="radio" name="gender" value="Mr"> Mr</label>
</div>
</div>
<input v-model="username" #input="$v.username.$touch" v-bind:class="{ error: $v.username.$error, valid: $v.username.$dirty && !$v.username.$invalid }" type="text" class="form-control" placeholder="Indiquez votre prénom et votre nom">
</div>
</form>
</div>
This is how you might do it. I've added the toggle button to show how this binding works:
new Vue({
el: '#app',
data: {
radio: 'mrs',
},
methods: {
toggle() {
this.radio = this.radio === 'mrs' ? 'mr' : 'mrs';
}
},
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input v-model="radio" type="radio" value="mrs">
<label>Mrs</label>
<input v-model="radio" type="radio" value="mr">
<label>Mr</label>
<button #click="toggle">Toggle</button>
</div>
EDIT: Snippet fixed and updated
You need have the value for gender set in the data model.
https://www.codeply.com/go/KDKbm4PTBO
<label class="form-group-label active">
<input v-model="gender" type="radio" value="Mrs"> Mrs
</label>
I have this code so far, i try to take the value from radio button.I can take from v-model value but with radio i have some problems.For example if i have more radio buttons how i can take the checked one.
new Vue({
el:'#root',
data:{
removelines: [
{value:'a'},
{value:'b'}
]
},
methods:{
insert:function(){
let vueIn = this;
axios.post('/vue', {removelines: vueIn.removelines.value}).then(
function(response){
vueIn.removelines = response.data.removelines.value;
}
).catch(function(error){ console.log(error.message); });
}
}
});
html code here:
<div class="card-block">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning active">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="a" checked>
Yes
</label>
<label class="btn btn-warning">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="b">
No
</label>
</div>
</div>
Check this working sample, please.
new Vue({
el: '#root',
data: {
removelines: 'b'
}
});
<script src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="root">
<div class="card-block">
{{ removelines }}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning active">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" autocomplete="off" v-bind:value="'a'" checked>
Yes
</label>
<label class="btn btn-warning">
<input v-model="removelines" name="removelines" type="radio" class ="cheker" v-bind:value="'b'">
No
</label>
</div>
</div>
</div>