I am doing a simple register form, using the existing register logic of AuthController#register
The request hits the controller successfully, but when I viewed validation errors in console log,showed
"[Vue warn]: Error in v-on handler: "ReferenceError: errors is not defined"
this is my vue code
<script>
export default {
props:{errors:Object},
name:"Register",
data(){
return {
name:"",
email:"",
password:"",
image:"",
};
},
methods:{
selectimage(e){
this.image=e.target.files[0];
},
register(){
var data=new FormData();
data.append('name',this.name);
data.append('email',this.email);
data.append('password',this.password);
data.append('image',this.image);
this.$inertia.post('/register',data);
console.log(errors.name);
},
},
};
</script>
And this is html form
<form #submit.prevent="register">
{{form}}
<div class="form-group">
<label for="name">Enter Name</label>
<input type="text" class="form-control border border-danger" id="name" v-model="name">
<small class="text text-danger">Please Enter</small>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" v-model="email">
</div>
<div class="form-group">
<label for="password">password</label>
<input type="text" class="form-control" id="password" v-model="password">
</div>
<div class="form-group">
<label for="image">choose image</label>
<input type="file" class="form-control" id="image" #change="selectimage">
</div>
<button class="btn btn-sm btn-danger float-right">submit</button>
</form>
this is controller
public function postRegister(Request $request)
{
$request->validate([
'name'=>'required',
'email'=>'required',
'password'=>'required|min:8',
'image'=>'image|mimes:jpg,jpeg,png',
]);
}
Related
I'm building a contact book app and i made modal in child component with from with few input fields. I'm trying use that values and add them to parent component. I have passed data with $emit but cant figure out how to use it in parent component - to add it in that table row.
Here is child component code:
<form #submit.prevent="addContact">
<div class="form-group">
<label for="exampleInputName1">First Name</label>
<input type="text" v-model="contacts.fname" class="form-control" id="exampleInputName1"
placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label for="exampleInputLastName1">Last Name</label>
<input type="text" v-model="contacts.lname" class="form-control" id="exampleInputLastName1"
placeholder="Enter Last Name"
required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email Address</label>
<input type="email" v-model="contacts.email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label for="exampleInputAdress1">Adress</label>
<input type="text" v-model="contacts.adress" class="form-control" id="exampleInputAdress1" placeholder="Enter Adress" required>
</div>
<div class="form-group">
<label for="exampleInputPhone1">Phone Number</label>
<input type="number" v-model="contacts.phone" class="form-control" id="exampleInputPhone1" placeholder="Enter Phone Number"
required>
</div>
<div class="form-group">
<label for="exampleInputCompany1">Company</label>
<input type="text" v-model="contacts.company" class="form-control" id="exampleInputCompany1" placeholder="Enter Company" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" #submit="addContact">Save</button>
</div>
<script>
export default {
data() {
return {
contacts: [{
fname: '',
lname: '',
email: '',
adress: '',
phone: '',
company: ''
}]
}
},
methods: {
addContact() {
this.$emit('passArr', this.contacts);
}
},
}
</script>
Here is parent component:
<tbody>
<tr class="d-flex">
<td class="user col-3"></td>
<td class="col-3"></td>
<td class="col-2">}</td>
<td class="col-2"></td>
<td class="col-2"></td>
</tr>
</tbody>
<script>
import modal from './AddContactModal.vue'
export default {
data() {
return {
}
},
components: {
modal
},
methods: {
}
}
</script>
You can listen for the passArr event in your parent component like this:
<parent-comp #passarr="myMethod" />
...
methods: {
myMethod(arg)
{
console.log(arg)
//arg will contain what you passed in the child method when you
// emit the event with `this.contacts` as arguments
}
}
(function() {
var app = angular.module('snc', []);
app.controller("QueryController", function($http) {
this.query = {};
this.sendQuery = function(contact) {
contact.querys.push(this.query);
this.query = {};
};
});
})();
<form name="queryForm" ng-controller="QueryController as queryCtrl" ng-submit="queryForm.$valid && queryCtrl.sendQuery(contact)" novalidate>
<blockquote>
<b>Name: {{queryCtrl.query.name}}</b><br/>
<b>Mobile: {{queryCtrl.query.mobile}}</b><br/>
<b>Eamil: {{queryCtrl.query.email}}</b><br/>
<b>Message: {{queryCtrl.query.message}}</b><br/>
</blockquote>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="queryCtrl.query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div class="form-group">
<label for="Mobile">Mobile:<span class="required">*</span></label>
<input type="number" ng-model="queryCtrl.query.mobile" class="form-control" id="mobile" placeholder="Enter Your Mobile Number" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" ng-model="queryCtrl.query.email" class="form-control" id="email" placeholder="Enter Your Email" required>
</div>
<div class="form-group">
<label for="Message">Message:</label>
<textarea type="text" ng-model="queryCtrl.query.message" class="form-control" id="name" placeholder="Enter Your Message" rows="4" required></textarea>
</div>
<div> reviewForm is {{queryForm.$valid}} </div>
<button type="submit" class="btn btn-snc">Submit</button>
</form>
I'm Using ng-app="snc" and Angularjs version 1.6, this is a simple contact form please check it and give me some advice. i want to send contact form into php page, where i use form data for send email for query and add it into database.
Try this code sample code
(function() {
var app = angular.module('snc', []);
app.controller('QueryController', function($scope, $http) {
$scope.query = {};
$scope.submit = function() {
console.log($scope.query);
$http({
method: "POST",
url: "", //php url
data: {
query
}
}).then(function mySuccess(response) {
console.log(response);
}, function myError(response) {
console.log(response);
});
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-app="snc" ng-controller="QueryController">
<b>Name: {{query.name}}</b><br/>
<div class="form-group">
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" ng-model="query.name" class="form-control" id="name" placeholder="Enter Your Name" required>
</div>
<div> reviewForm is {{fromvalue.$valid}} </div>
<button type="submit" ng-click="submit()" class="btn btn-snc">Submit</button>
</form>
I have this form and I tried to make a "onsubmit" that when I click submit it checks if the "email" is = to "cemail" and if username was taken before or not i got this so far
<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
Javascript code:
<script>
function ValidationEvent() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var cemail = document.getElementById("cemail").value;
// Conditions
if (email.match != cemail.match) {
alert("Your email doesn't match!");
}
if(mysqli_num_rows($result) != 0)
{
alert("Username already taken!");
}
else {
alert("Thank you");
}
}
</script>
Am I approaching the function in the wrong way is there another easier way and is it okay i put an sql statement in my java script ?
First, don't use inline HTML event handling attributes (like "onsubmit") as they create "spaghetti code", anonymous global event handling wrapper functions and don't conform to the modern W3C DOM Event handling standard.
Second, your .php results have to be gotten from somewhere. You'll need to put a call into that file for its results before you can use them.
Next, you were using the .match() string method incorrectly to compare the emails against each other. All you really need to do is compare the values entered into the email fields (it's also a good idea to call .trim() on form values to strip out any leading or trailing spaces that might have been inadvertently added).
Once you restructure your code to use standards, the JavaScript will change as follows (FYI: This won't work in the Stack Overflow snippet environment because form submissions are blocked, so you can see a working version here):
// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you will need:
var frm = document.getElementById("frm");
// Don't set variables to the values of DOM elements,
// set them to the DOM elements themselves so you can
// go back and get whatever properties you like without
// having to scan the DOM for them again
var email = document.getElementById("email");
var username = document.getElementById("username");
var cemail = document.getElementById("cemail");
// Set up a submit event handler for the form
frm.addEventListener("submit", validationEvent);
// All DOM event handling funcitons receive an argument
// that references the event they are responding to.
// We need that reference if we want to cancel the event
function validationEvent(evt) {
// Conditions
if (email.value.trim() !== cemail.value.trim()) {
alert("Your email doesn't match!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
return;
}
// You need to have already gotten the "mysqli_num_rows($result)" value
// from your .php file and saved it to a variable that you can then check
// here against "!=0"
if(mysqli_num_rows($result) != 0) {
alert("Username already taken!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
} else {
alert("Thank you");
}
}
});
<form class="form-horizontal" id="frm" action="#" method="post">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
For checking the emails with email & cemail use
email.localeCompare(cemail)
This will check the string comparison betwwen two emails
And for mysqli_num_rows , is not defined any where in javascript, so we will get the undefined error in console, so need to write a different funnction with that name.
First give a name and an action to your form
<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
....
</form>
Then put this script at the bottom
<script>
$('#myForm').on("sumbit", function(){
// cancel the original sending
event.preventDefault();
$.ajax({
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
})
.done: function(data) // is called wehn the call was okay
{
if( data.substr(0, 5) == "Error"){
alert(data); // sent the sting of the "error message" begining with "Error"
}else{
top.location.href = data; // sent the sting of the "success page" when all was okay and data are saved in the database
}
}
.fail(function() {
alert( "Error: Getting data from Server" );
})
});
</script>
in the php file check the values an return an error if something went wrong.
<?php
if(!isset($_POST['email']) || !isset($_POST['cemail'])){
die("Error: Please fill out both email fields.");
if($_POST['email'] != $_POST['cemail'] ){
die("Error: The Email adresses do not match.");
}
here do what you want to do with the data.
when finish just send the new url
echo "success.html";
}
?>
I want to use this plugin https://github.com/DiegoLopesLima/Validate in meteor js
Now when I console.log $('form').validate();
I get
[form.mainForm, selector: "form", context: document, jquery: "1.11.0", constructor: function, toArray: function…]
I was expecting true of false then I could just submit the form when the validation is true or false.
Here is my submit event.
Template.contactSubmit.events({
'submit form': function(e) {
e.preventDefault();
var post = {
email: $(e.target).find('[name=email]').val(),
name: $(e.target).find('[name=name]').val(),
question: $(e.target).find('[name=question]').val(),
found_us: $(e.target).find('[name=found_us]').val()
};
$('form').validate();
post._id = Contacts.insert(post);
Router.go('acorn', post);
}
});
Here is my submit template
Note the data-required in the first input
<template name="contactSubmit">
<form class="mainForm">
<div class="control-group">
<label class="control-label" for="email">email</label>
<div class="controls">
<input data-required name="email" type="text" value="" placeholder="Your email"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">name</label>
<div class="controls">
<input name="name" type="text" value="" placeholder="name"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="question">question</label>
<div class="controls">
<textarea name="question" type="text" value="What do you want to build?"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="found_us">found us</label>
<div class="controls">
<textarea name="found_us" type="text" value="How did you find us?"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="submitContact" type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</form>
</template>
You don't use the plugin like it should. It expects a valid callback like that :
$('form').validate({
sendForm: false,
valid: function() {
// Here is the code you want to run when the form is valid
console.log("valid !");
}
});
I'm having trouble resetting form fields after submitting in AngularJS (v1.1.3). Here's a snippet of what I'm trying to do:
HTML
<form name="addMemberForm">
<input name="name" type="text" placeholder="Jon Doe" ng-model="member.name" required/></td>
<a class="btn btn-primary" ng-click="createMember(member)" ng-disabled="addMemberForm.$invalid"><i class="icon-plus"></i></a>
</form>
JS
$scope.createMember = function(member) {
var membersService = new Members(member);
membersService.$create(function(member) {
$scope.members.push(member);
$scope.addMemberForm.reset(); //TypeError: Object #<FormController> has no method 'reset'
});
};
Is there another way to reset form elements?
Figured it out thanks to #tschiela's comment. I had to do this:
$scope.createMember = function(member) {
var membersService = new Members(member);
membersService.$create(function(member) {
$scope.members.push(member);
$scope.member = '';
});
};
Just Take default value of the form .
HTML form
<form novalidate id="paperForm" class="form-horizontal" name="formPaper">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">
Name
</label>
<div class="col-sm-8">
<input type="text" id="name" placeholder="Please Enter Name" class="form-control" ng-model="paper.name" ng-name="name" required>
</div>
<label class="col-sm-3 control-label" for="name">
Department
</label>
<div class="col-sm-8">
<input type="text" id="department" placeholder="Please Enter Department" class="form-control" ng-model="paper.department" ng-name="department" required>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="reset(paper)">Reset</button>
</form>
set reset code inside controller
var deafualtForm = {
name : '',
department : ''
}
$scope.reset= function(paper) {
$scope.paper = angular.copy(deafualtForm);
}