Menu
This is my error message:
{message: "This username is already taken", status: false, error-type: 3, x-debug: [,…]}
My vue js code is
<script>
regBox = new Vue({
el: "#regBox",
data: {
username : '',
phone : '',
email : '',
password: '',
confirm_password : ''
},
methods: {
handelSubmit: function(e) {
data = {};
data['username'] = this.username;
data['email'] = this.email;
data['phone'] = this.phone;
data['password'] = this.password;
data['confirm_password'] = this.confirm_password;
$.ajax({
url: 'https://herokuapp.com/api/user/reg/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status)
alert("Registration Success")
else {
alert("failed to Register!");
}
}
});
return false;
}
},
});
</script>
My HTML code is showing below. This is the HTML code I am used to inputting the values from the user. So, how can I display the error messages from the backend?
<div class="tab-pane" id="Registration">
<form id="regBox" method="POST" class="form-horizontal" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="email" placeholder="Email" required="required" v-model="email" />
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input name="phone" type="number" class="form-control" id="mobile" placeholder="Mobile" data-parsley-pattern="^\d{10}$" required="required" v-model="phone"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="password" placeholder="Password" required="required" v-model="password"/>
</div>
</div>
<div class="form-group">
<label for="confirmpassword" class="col-sm-2 control-label">
Confirm Password</label>
<div class="col-sm-10">
<input name="confirm_password" type="password" class="form-control" id="confirm_password" placeholder="Password" required="required" v-model="confirm_password"/>
</div>
</div>
Can anybody tell how to display that error message, For each input, I am getting error messages . So please help how to display the same?
703
We can show errors with two methods without using the alert box. Syntax: node. textContent = "Some error message" // To draw attention node.
For error handling, we can assign a handler function to Vue. config. errorHandler . The handler gets called for any uncaught exceptions within any Vue instance (Vue components) throughout the application.
The result was Vue. js, which is one of the most popular frontend frameworks in use today.
Go to the debug view in your editor and select your preferred browser configuration. Press 5 or click the green play button. At this point, your breakpoints should hit when the code executes. If you look at the debug view, you can spot some useful data for debugging your application.
This is how to place the response in your data:
handelSubmit: function(e) {
var self = this;
data = {};
data['username'] = this.username;
data['email'] = this.email;
data['phone'] = this.phone;
data['password'] = this.password;
data['confirm_password'] = this.confirm_password;
$.ajax({
url: 'https://herokuapp.com/api/user/reg/',
data: data,
type: "POST",
dataType: 'json',
success: function (msg, status) {
self.errors.username = JSON.stringify(msg).replace(/\"/g, "");
}
});
}
Just place the returned errors in your vue data and conditionally render the errors when needed like below:
regBox = new Vue({
el: "#regBox",
data: {
username: 'Timmy',
phone: '0123456789',
email: '[email protected]',
password: 'secret',
confirm_password: 'secret',
errors: {
username: '',
phone: ''
}
},
methods: {
handelSubmit: function(e) {
var self = this;
data = {};
data['username'] = this.username;
data['email'] = this.email;
data['phone'] = this.phone;
data['password'] = this.password;
data['confirm_password'] = this.confirm_password;
// Ajax call
var response = { errors: {} };
response.errors.username = { message: "This username is already taken", status: false, errorType: 3, xDebug: '[,…]'};
this.errors.username = JSON.stringify(response.errors.username).replace(/\"/g, "");
}
},
});.error {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div class="tab-pane" id="Registration">
<form id="regBox" method="POST" class="form-horizontal" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4" />
<p class="error" v-if="errors.username">{{ errors.username }}</p>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="email" placeholder="Email" required="required" v-model="email" />
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">Mobile</label>
<div class="col-sm-10">
<input name="phone" type="number" class="form-control" id="mobile" placeholder="Mobile" data-parsley-pattern="^\d{10}$" required="required" v-model="phone" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input name="password" type="password" class="form-control" id="password" placeholder="Password" required="required" v-model="password" />
</div>
</div>
<div class="form-group">
<label for="confirmpassword" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-10">
<input name="confirm_password" type="password" class="form-control" id="confirm_password" placeholder="Password" required="required" v-model="confirm_password" />
</div>
</div>
<input type="submit">
</form>
</div>Click the submit button to see in action.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
