Input validation won't prompt errors - javascript

It seems like my validation won't work properly if I click the submit button it just refresh the browser and won't validate my inputs or I'm not sure if the Javascript cause the validation won't work. First I will start from appending my register form from other file using empty() and append() function based on user's option.
#section ('page-script')
<script>
$(document).on("click", "#register", function ()
{
$.get("accountRegister", function (data)
{
$("#accountBottomContainer").empty();
$("#accountBottomContainer").append(data);
});
});
</script>
#endsection
As you can see below here where I append register.blade.php in my panel-body named #accountBottomContainer
Here where I append my register.blade.php if the user hit the register button after the it wil append panel-body that has an id = accountBottomContainer
#section ('content')
<div class = "row">
<div class = "col-xs-12 col-md-8">
<div class = "panel panel-default">
<div class = "panel-heading">
<h2>Account Dashboard</h2>
<hr>
</div>
<div class = "panel-body">
<button type = "button" class = "btn btn-info" id = "register">Register Employee</button>
<button type = "button" class = "btn btn-info" id = "searchEmployee">Search Employee</button>
<div class = "row">
<br>
<div class="col-md-10">
<div class = "panel panel-default">
<div class = "panel-body" style = "height: 500px" id = "accountBottomContainer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
Form with validation
Here where I loop through each error to check where the user missed to fill up one of the textfields.
#if (count($errors) > 0)
<div class = "row">
<div class = "col-md-6">
<ul>
#foreach($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
</div>
#endif
<form class = "form-vertical" role = "form" method = "post" action = "{{ route ('account.accountRegister') }}">
<div class = "form-group">
<label for = "email" class = "control-label">Email Address</label>
<input type = "text" name = "email" class = "form-control" id = "email">
</div>
<div class = "form-group">
<label for = "username" class = "control-label">Username</label>
<input type = "text" name = "username" class = "form-control" id = "username">
</div>
<div class = "form-group">
<label for = "password" class = "control-label">Password</label>
<input type = "password" name = "password" class = "form-control" id = "password">
</div>
<div class = "form-group">
<button type = "submit" class = "btn btn-default">Sign Up</button>
</div>
<input type = "hidden" name = "_token" value = "{{ Session::token() }}">
</form>
Controller
public function postRegister(Request $request)
{
$this->validate($request, [
//This will be unique in users table
'email' => 'required|unique:users|email|max:255',
'username' => 'required|unique:users|alpha_dash|max:20',
'password' => 'required|min:6',
]);
}
routes
Route::get('/accountRegister',
[
'uses' => '\App\Http\Controllers\AccountController#getRegister',
'as' => 'account.accountRegister',
]);
Route::post('/accountRegister',
[
'uses' => '\App\Http\Controllers\AccountController#postRegister',
]);


On your javascript, you use a #register id, but i cannot see it on the html side. Is it a mistake?
You should rather use :
$(document).on("submit", "#theIdOfYourFormTag", function () {

Related

Why isn't the value going to the console?

This is a stupid question but I am getting frustrated and hoping for some help. Why won't my values output to the console after submitting? Anyone notice issues?
var todos = "";
// user clicked on the add button in the to-do field add that text into the to-do text
$('#add-todo').on('click', function(event) {
event.preventDefault();
//values per text box
todos = $("#todo-input").val().trim();
//test values from textbox
console.log(todos);
HTML
<div class ="col-4">
<form role = "form">
<div class = "form-group row">
<div class = "To-Do-List">
<label for="todo-input">Add Your To Do List Here:</label>
</div>
<input class="form-control" id="todo-input" type = "text">
<tbody id = "table_body">
</tbody>
</div>
</form>
</div>
<div class="button">
<button class ="btn btn-danger" id="add-todo" type="submit">Add</button>
</div>

You only need close whit "})"
var todos = "";
// user clicked on the add button in the to-do field add that text into the to-do text
$('#add-todo').on('click', function(event) {
event.preventDefault();
//values per text box
todos = $("#todo-input").val().trim();
//test values from textbox
console.log(todos);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="col-4">
<form role = "form">
<div class = "form-group row">
<div class = "To-Do-List">
<label for="todo-input">Add Your To Do List Here:</label>
</div>
<input class="form-control" id="todo-input" type = "text">
<tbody id = "table_body">
</tbody>
</div>
</form>
</div>
<div class="button">
<button class ="btn btn-danger" id="add-todo" type="submit">Add</button></div>

How I can send a form POST from a jQuery datepicker

I have this form:
<div role="tabpanel" class="tab-pane" id="xcell">
<div class = "row">
<div class = "col-md-7">
<form method = "POST" action = "<?php echo base_url('Usercontroller/getXcell') ?>">
<div class="form-group">
Start: <input id ="startdate" type ="text" size = "8"/>
</div>
<div class="form-group">
Sfarsit: <input id ="enddate" type ="text" size = "8"/>
</div>
<button type="submit" class="btn btn-default btn-success">Genereaza xcell</button>
</form>
</div>
</div>
</div>
And this is the javascript calendar:
$(document).ready(function(){
$('#startdate').datepicker({
startdate : $(this).val()
});
$('#enddate').datepicker({});
});
I was trying with this startdate : $(this).val(), but it will give a empty result. This is the function where I send data:
public function getXcell() {
$data= $this->input->post();
var_dump($data);
}
I'm using codeigniter, I want to send the inputs that are selected in Start and Sfarsit to my php function to work with. Thanks

You forgot to add name attribute in your form fields
<div class="form-group">
Start: <input id ="startdate" type ="text" size = "8" name="startdate"/>
</div>
<div class="form-group">
Sfarsit: <input id ="enddate" type ="text" size = "8" name="enddate" />
</div>

put data on textbox dynamically not working

I am not able to enter the data to the previous page using ng-model. I moved to the next page after filling some data in textbox,after come to same page i want my data to be entered same as i entered previously, i write the code but its not working please tell me what i am doing wrong and thanks in advance
js code:-
$scope.notesPage = function() {
$rootScope.data = {
Name: $scope.prospectName,
};
$location.path('/prospectNotes');
};
$scope.addProspect = function() {
$rootScope.data.ProspectNotes = $scope.notes;
$scope.ProspectNotes = "";
};
function fillFormData() {
$scope.prospectName = $rootScope.data.Name;
}
$scope.addProspectForm = function() {
$location.path('/create');
fillFormData();
}
first html page
<div class = "container" id = "form-container">
<div class = "form-group">
<label for = "prospectName"> Prospect Name:
<img src = "images/required.gif" alt = "Required" class = "required-star">
</label>
<input type = "text" id = "prospectName" name = "prospectName" ng-model = "prospectName"
class = "form-control" required>
</div>
<div class = "form-group">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="notesPage()"
style="margin-left:10px;"> Next </button>
</div>
</div>
second html page
<div class = "container" id = "form-container">
<div class = "form-group">
<label for = "notes"> Notes for Prospect {{data.Name}}</label>
<textarea rows="20" id = "notes" name = "notes" ng-model = "notes" class = "form-control"></textarea>
</div>
<div class = "form-group">
<input type="button" id="cancel-button" value="Back" class="col-sm-2 btn btn-primary"
ng-click="addProspectForm()">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="addProspect()"
style="margin-left:10px;"> Add </button>
</div>
</div>

JavaScript not Sending Parameter to Controller MVC

I have the following view
#using System.Linq;
#model MyCompanyNET.Models.ViewModels.AdministratorViewModel
<style type="text/css">
span {
padding-right: 10px;
}
...
</style>
<div class="manage">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-toggle="tab" href="#invite">
<span class="glyphicon glyphicon-inbox"></span>Invite
</a>
</li>
...
</ul>
<div class="tab-content">
<div id="invite" class="tab-pane active fade in">
#Html.Partial("_InvitePartial", Model)
</div>
...
</div>
</div>
#section scripts {
<script>
$(function () {
$("input[type=button]").click(function () {
var data_email = $('#email').val();
var data_product = $('#product option:selected').text();
$.ajax({
url: '#Url.Action("SendInvite")',
type: 'POST',
data: { email: data_email, product: data_product },
success: function (result) {
$('#fail_message').html(result.result_failure);
$('#success_message').html(result.result_success);
}
});
});
});
</script>
}
The partial view is
#using (Html.BeginForm("SendInvite", "Tools", FormMethod.Post,
new
{
#class = "form-horizontal",
enctype = "multipart/form-data",
role = "form"
}))
{
#Html.AntiForgeryToken()
<h2>Invite Users</h2>
<div class="form-group">
#Html.LabelFor(m => m.EmailAddress, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", id = "email" })
#Html.ValidationMessageFor(m => m.EmailAddress)
</div>
</div>
<div class="form-group">
#Html.Label("Access To", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DropDownList("Product", new SelectList(
new List<Object> {
new { Text = "Product1", Value = "Product1" },
new { Text = "Product2", Value = "Product2" },
new { Text = "All", Value = "All" }},
"Value",
"Text"),
new { #class = "form-control", id = "product" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<span id="fail_message" class="label label-danger"></span>
<span id="success_message" class="label label-success"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Invite User" class="btn btn-primary" />
</div>
</div>
}
and my controller is
[AllowAnonymous]
public async Task<JsonResult> SendInvite(string email, string product)
{
ApplicationUser user = null;
string result = String.Empty;
if (ModelState.IsValid)
{
if (String.IsNullOrEmpty(email))
{
return Json(new
{
result_success = String.Empty,
result_failure = "Please enter and email address"
}, JsonRequestBehavior.AllowGet);
}
}
... // Do stuff with email and product.
}
Now when this partial view code was in the view itself, everything worked fine. I'd get both the entered email address and the selected product coming through to my controller method SendInvite, but now the button does not even fire.
Now, I have changed the
<input type="button" value="Invite User" class="btn btn-primary"/>
to use submit
<input type="submit" value="Invite User" class="btn btn-primary"/>
This now calls my controller method but without the email parameter, which is always null(?). To make things worse, the return Json(new ... also does not render my <span id="success_message" class="label label-success"></span>s and it used to when everything was in the main view. Why is this occurring and how an I fix it?
Thank for your time.

the name of the email field is EmailAddress not email.. change your parameter name to string EmailAddress or you can change your markup to
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", Name="email", id = "email" })
trick is the make the name of the field and your parameter name match, not the id.

Killercam, regarding your form submitting. Did you change it back to type="button" and not type="submit"? If not, reason is when you click the button, it will submit it and will disregard your JavaScript.

try decorating your action method by HttpPost

Jquery submit() for a form not working

Ok so jquery works fine when i try using hide() and stuff like that but when I try using submit() nothing happens!
Would really appreciate if someone helped me with this.
Here is my form:
<form class = "form-horizontal" action = "demo.php" method="post" id = "contactform" >
<div class = "modal-header">
<h4> Sign up for newsletter!</h4>
</div>
<div class = "modal-body">
<div class = "form-group">
<label for = "contact-name" class = "col-lg-2" control-label>Name:</label>
<div class = "col-lg-10">
<input type = "text" class = "form-control" id = "contact-name" name="contact-name" placeholder = "Full name" value = "">
</div>
</div>
<div class = "form-group">
<label for = "contact-email" class = "col-lg-2" control-label>Email:</label>
<div class = "col-lg-10">
<input type = "email" class = "form-control" id = "contact-email" name = "contact-email" placeholder = "u#example.com">
</div>
</div>
<div class = "form-group">
<label for = "contact-name" class = "col-lg-2" control-label>Name:</label>
<div class = "col-lg-10">
<textarea class = "form-control" rows = "8"> </textarea>
</div>
</div>
</div>
<div class = "modal-footer">
<a class = "btn btn-default" data-dismiss = "modal">Close</a>
<button class = "btn btn-primary" type = "button" name = "submit" id = "submit" >Submit thiscarp</button>
</div>
</form>
And here is my Jquery code
<script type = "text/javascript">
$(document).ready(
function(){
$("button#submit").click(function()
{
$("form#contactform").submit();
});
});
</script>
Also i have this in my head
<head>
<title> Bootstrap 3 </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>

<script type = "text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$("#contactform").submit();
});
});
</script>
change to $("#contactform").submit(); because you used bad selector and also in button selector

Solved it!
The button id can't be submit.
I changed
<button class = "btn btn-primary" type = "button" name = "submit" id = "submit" >Submit thiscarp</button>
to
<button class = "btn btn-primary" type = "button" name = "connect" id = "connect" >Submit thiscarp</button>

Categories

Resources