I'm having what probably seems like a noob problem. I have a simple Angular controller that controls a form on a page. The markup for the form is pretty straight forward. When I load the page, I see the form rendered twice, rather tha once as it should be. What am I doing wrong here?
Here is my HTML:
<div class="container">
<div class="col-lg-12">
<div class="row">
<h2>CREATE</h2>
<div class="col-lg-6 col-lg-offset-2">
<div class="form-container" ng-controller="NewPostQuestionCtrl">
<form accept-charset="UTF-8" name="form.postQuestionForm" ng-submit="createPostQuestion(postQuestion)" class="new_post_item" novalidate>
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" ng-model="postQuestion.token" ng-init="postQuestion.token='<%= form_authenticity_token %>'">
<input name="employer_id" type="hidden" ng-model="postQuestion.employer_id" ng-init="postQuestion.employer_id='<%= current_employer.id %>'">
<div class="form-group">
<label>Question</label>
<textarea class="question-textbox" name="question" ng-model="postQuestion.question" required></textarea>
</div>
<div class="form-group">
<label>Image</label>
<input class="" name="image" ng-model="postQuestion.image" type="file" required>
</div>
<div class="form-group">
<label>Publish Question</label>
<select class="" name="published" ng-model="postQuestion.published" required>
<option value="true">Publish</option>
<option value="false">Don't Publish</option>
</select>
</div>
<input class="submit-btn" name="commit" type="submit" value="Publish Post" ng-disabled="form.postQuestion.$invalid">
</form>
</div>
</div>
</div>
</div>
</div>
Here is my controller:
app.controller('NewPostQuestionCtrl', ['$scope', '$http', function($scope, $http) {
$scope.form = {}
$scope.postQuestion = {
token: $scope.token,
employer_id: $scope.employer_id,
question: $scope.question,
published: $scope.published,
image: $scope.image
};
}]);
Thanks!
Do you have the full HTML for your application to hand? Is it only the form that is rendered twice or also the h2 element? Is it possible you have the ng-view directive twice in your markup?
Hope that helps!
I don't think this will help anyone, but I figured out my problem and it was a really obvious oversight.
I have two <%= yield %> tags in my application.html.erb that are nested inside an if/else statement. The second tag was outside the statement, which was evaluating to true, causing my partial to be rendered twice.
I think it is loading twice.
Check in your .js file where you map the urls with controller. If you have the controller set in the app.js or any_file.js(where you map url with controller and views), you dont have to include the ng-controller in the html..
Related
So i'm getting this error on my mvc project while working on my form.
The error indicates that I haven't closed the form tag properly.
However, as you'll see below, I have closed it properly.
<form method="post">
//form content below
</form>
I have added taghelpers in my ViewImports.cshtml file as you can see below.
#using ServiceWebsite
#using ServiceWebsite.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
May you have an unclosed quotation.
The same problem happened to me because I haven't closed " in readonly="readonly
<form class="form customized-bg-color" asp-action="Create" method="post">
<div class="col-lg-3 ">
<input type="text" class="form-control " id="Total" readonly="readonly />
</div>
</form>
I was facing the same problem but I have solve it with the following :
Either using pure html form
Or inject Helper tags into the form like so
#using (Html.BeginForm("Login", "Main", FormMethod.Post))
{
<form>
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#if (#ViewBag.Message != null)
{
<div style="border: 1px solid red">
#ViewBag.Message
</div>
}
<div class="mb-3">
<label class="form-label">#Html.LabelFor(UserBindingModel => UserBindingModel.UserName) </label>
</div>
}
Save it and it will disappear.
I used this website as a reference.
Another example of functional form:
#model UserBindingModel
#{
ViewBag.Title = "Login";
}
<form asp-action="Login">
<div class="mb-3">
<label asp-for="UserName" class="form-label"></label>
<input type="text" class="form-control" asp-for="UserName">
</div>
<div class="mb-3">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control">
</div>
</form>
I think you should check the href attribute of Your stylesheets and images.
I also hit this "error", VS 2022 .Net 6 project, also with a well-formed, uh, form :) I removed the form tag & closing tag, rebuilt the project, then added them back in. Built just fine, issue did not reoccur. Depending on what you are trying to to, I'd try that before doing any major code changes...
the Form tag and its closing SHOULD be IN its container if it has one, I had the same problem.
your form tag should Not be Like this
<div>
<form>
</div>
</form>
Correct:
<div>
<form>
</form>
</div>
I am currently developing a web application using ASP.NET Core v2.2.
I'm having troubles in one of my forms where I have several "multiselect" (using bootstrap-select selectpicker). The problem is that the form doesn't allow users to not select any options in a multiselect before being submitted.
Here's an example of one of my multiselects that I'd like to be "optional" :
<form asp-controller="Home" asp-action="Index" method="post" role="form" id="bsForm">
<div class="row row-mb-2">
<div class="col col-sm-4">
<label class="col-form-label" style="float:left">Product :</label>
</div>
<div class="col">
<select asp-for="product.ProductId"
class="form-control selectpicker" multiple data-live-search="true"
style="display: initial !important"
asp-items="#(new SelectList(ViewBag.ListOfProducts,"ProductId","ProductName"))">
<option data-hidden="true"></option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Submit" class="btn btn-primary" style="width:25%" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('.selectpicker').selectpicker();
});
</script>
When I'm looking into it (by inspecting the element), it looks like there is some kind of validator running and forbidding users to let these selectpickers not selected.
If you have any idea of how to disable this validator (or just the fact of forcing users to select a value), I would be grateful.
Thanks in advance !
Edit :
So I've found something that does the trick. I think that by doing so I removed every existing validations conditions. Here's what I did :
<script type="text/javascript">
$(document).ready(function () {
$('#bsForm').validate({
rules: {
}
});
});
</script>
Since this is kind of a butchering solution, I'm still looking for a better solution.
I'm trying to implement validation by Bootstrap and I've pasted the following sample on my page:
<div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
I can see that the appearance of the input control has changed (it's a bit rounded and much more aesthetic now) but it still doesn't show the green border as can be seen on the page linked to. The Bootstrap I'm linking to is pointed out as follows.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
I have tried to google for this issue but to no avail. I have a fiddle illustrating the issue.
What can I do about it? What am I missing?
Bootstrap 5 (Update 2021)
Since jQuery is no longer required for Bootstrap 5, it's easy to do client-side validation with vanilla JavaScript. The docs include a generic code example that should work on all forms with needs-validation..
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Bootstrap 5 Form Validation Demo
Bootstrap 4 (Original Answer)
Validation has changed as of the Bootstrap 4 beta release.
The valid state selectors use the was-validated class which would be added dynamically after validating the form via client-side JavaScript. For example...
<form class="container was-validated" novalidate="">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" name="i1" id="inputSuccess1">
<div class="valid-feedback">Success! You've done it.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="inputSuccess2">Input with danger</label>
<input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
<div class="invalid-feedback">That didn't work.</div>
</div>
<div class="">
<button type="submit" class="btn btn-secondary">Text</button>
</div>
</form>
https://codeply.com/go/45rU7UOhFo
Form Validation Example Demo - Bootstrap 4.0.0
As explained in the docs, if you intend to use server-side validation you can simply set the is-valid or is-invalid classes on the form-controls...
<form class="container">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-feedback">Success! You've done it.</div>
</div>
</form>
It appears the validation changes again in the final release version of Bootstrap 4: http://getbootstrap.com/docs/4.0/components/forms/#validation.
It becomes more complicated than I thought.
Custom style client side validation is recommended:
When validated, the form adds a class named was-validated.
Feedback messages are wrapped within .valid-feedback or .invalid-feedback.
For server-side validation:
No need for was-validated class on the <form> tag.
Add .is-valid or .is-invalid on the input control.
Add .invalid-feedback or .valid-feedback for the feedback message.
my simple way....
<input type="text" class="form-control" id="unombre"
placeholder="su nombre" name="vnombre" required
onblur="valida(this.id)">
<script>
function valida(v) {
var dato = document.getElementById(v).value
document.getElementById(v).className +=' is-valid';
}
</script>
I'm using this code for a form in HTML:
<div class="login-wrapper">
<form>
<div class="popup-header">
<span class="text-semibold"><i class="fa fa-sign-in"></i> Logging in</span>
</div>
<div class="well">
<div class="form-group has-feedback">
<label>Username</label>
<input type="text" name="user" class="form-control" placeholder="e.g. andre#mail.de">
<i class="icon-users form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Password">
<i class="icon-lock form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>reCaptcha</label>
<div class="g-recaptcha" data-sitekey="..."></div>
</div>
<div class="form-actions text-right">
<input type="submit" id="loginbutton" name="loginbutton" value="Login" class="btn btn-primary">
</div>
</div>
</form>
</div>
<!-- /login wrapper -->
However, when I press the submit button, it does nothing but giving me a very strange url in my browser's address bar:
http://localhost/?user=&password=&g-recaptcha-response=&loginbutton=Login
Whenever I fill out fields, it kind of puts the content into the URL:
http://localhost/?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
The intended PHP code which should be run when pressing the button won't even run or load, since this HTML stuff apparently screws things up. I don't know what I have done the wrong way. Any suggestions?
In order for the form to submit somewhere else, you need to set the form elements action parameter.
<form action="some_file.php">
Alternatively, you can take the query string and append it directly to the file path to test your script.
http://localhost/some_file.php?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
Inside of some_file.php, you would then pull out each of the variables like
$user = $_GET['user'];
$password = $_GET['password'];
The very strange url is actually the result of a GET request.
The parameters are separated by an & so you have:
user=peter%40griffin.com&password=somepass&g-recaptcha-response=
"User" is the attribute name of your input and "peter%40griffin.com" is the value
First you need to send your form to an action using the attribute action="save.php", for example an pass the parameters using the method="POST", so the user can't see the values in the URL.
<form action="save.php" method="post">
jsfiddle demo: https://jsfiddle.net/zpufky7u/1/
I have many forms on the site, which was working fine, but just suddenly angular is binding all the forms with class="ng-pristine ng-valid"
Is this a setting or what can cause angular to auto-bind forms?
I'm using angular version: angular#1.4.7
Following is my form, as you can see there is no model inside form
<form name="app_bundle_notification_type" method="post">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<div class="checkbox">
<label class="required">
<input type="checkbox" id="app_bundle_notification_type_isNewsletter" name="app_bundle_notification_type[isNewsletter]" required="required" value="1" checked="checked">
Yes, I would like to receive email newsletter for new deals, coupons and news.
</label>
</div>
</div>
</div>
</div>
<div class="row m-y-1">
<div class="col-sm-12">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
<input type="hidden" id="app_bundle_notification_type__token" name="app_bundle_notification_type[_token]" class="form-control" value="b-_qAF6LHFy_GtPlsFG3iguhVXfGsj38TXm22Ke8j0k">
</form>
Angular app.js
define(['angular'], function() {
var app = angular.module("myApp", []);
app.init = function () {
angular.bootstrap(document, [app.name]);
};
return app;
});
So far I found the issue, if you do angular.bootstrap(document, [app.name]); then it is binding the form. it was not causing this issue before.
Presuming you are using a form tag around your form, Angular automatically adds those classes to each ng-model inside your form.
This allows you much more control over the elements inside your form to perform any validation or logic you want your form to capture or enforce before submitting.
Much of it is listed in the docs here
https://docs.angularjs.org/api/ng/directive/form
For this reason, Angular prevents the default action (form submission
to the server) unless the <form> element has an action attribute
specified.
New version accepts empty action="", check release version at https://github.com/angular/angular.js/pull/3776