Rails Gem Client Side Validations html struct - javascript

My project use Twitter Bootstrap CSS Framework,so my html like this.
<div class="control-group ">
<label class="control-label" for="user_name">Username</label>
<div class="controls">
<input data-validate="true" id="user_name" name="user[name]" size="30" type="text">
</div>
</div>
When validate failed, Client Side Validation change it to:
<div class="control-group ">
<div class="field_with_errors">
<label class="control-label" for="user_name">Username</label>
</div>
<div class="controls">
<div class="field_with_errors">
<input data-validate="true" id="user_name" name="user[name]" size="30" type="text">
<label for="user_name" class="message">Please input Username</label>
</div>
</div>
</div>
But I want to user Bootstrap Form validation Css:
The html is:
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
</div>
How to do?

try this gem: realtime validations

Related

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

Pass content of div element to action with asp core 2.0 form

I have an asp core form that transfers data to my "Create" action. I have inputs with "asp-for" attribute to initialize specific columns in my db and i have a "Content" column which i want to initialize by fetching innerText from element. So how can i send innerText at the time when i submit form and to send it all together to the action? And is it possible to create custom asp core tag that would fetch innerText? Thanks.
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="container">
<div class="row" id="preview">
<div id="result">
</div>
<div class="settings">
<label><input type="button" id="myBtn" />Додати кнопку</label>
#Html.Partial("_ModalBoxPartial")
<label><input type="checkbox" checked="checked" id="auto-generate" />Auto-generate</label>
<label><input type="checkbox" checked="checked" id="save-as-practice" />Save for practice</label>
</div>
</div>
<div class="row">
<div class="col-md-12" id="editor-wrapper" style="background-
color:pink;">
</div>
</div>
<div class="col-md-4">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="text" id="" name="module" />
<div class="form-group">
<div class="col-md-10">
<textarea id="translation" name="translation"></textarea>
</div>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="KeyWords" class="control-label"></label>
<input asp-for="KeyWords" class="form-control" />
<span asp-validation-for="KeyWords" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CategoryId" class="control-label"></label>
<select asp-for="CategoryId" class="form-control" asp-items="ViewBag.CategoryId"></select>
</div>
<div class="form-group">
<label asp-for="ShowCaseText" class="control-label"></label>
<input asp-for="ShowCaseText" class="form-control" />
<span asp-validation-for="ShowCaseText" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ExprId" class="control-label"></label>
<select asp-for="ExprId" class="form-control" asp-items="ViewBag.ExprId"></select>
</div>
<div class="form-group">
<label asp-for="Image" class="control-label"></label>
<input asp-for="Image" class="form-control" />
<span asp-validation-for="Image" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" id="submitBtn" />
</div>
</div>
</div>
ASP.NET MVC, and I could say most MVCs frameworks, performs post using HTTP Posts (I know it sounds redundant). It means that it will only post values from enabled input elements. So, from the browser point of view, your div is not different from any other div.
One possible solution is just adding a hidden input with that very same value:
<input asp-for="Foo" class="form-control" type="hidden" />

JQuery $('form').serialize() produces empty results

fiddle: http://jsfiddle.net/a3f6ouqw/2/
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<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="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
Javascript code
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
and I'm always getting empty str. Any ideas?
add name in input and select
For a form element's value to be included in the serialized string, the element must have a name attribute.
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="email" type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<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="exampleInputPassword1">Password</label>
<input name="password" type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input name="dateControl" type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select name="selectpicker" class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input name="checkbox" type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
The issue is because none of your input elements, ie. the input, select, textarea etc., have name attributes.
These are required to make the HTML valid, and are also what the serialize() method uses as the keys to associate the values to.
Add name attributes on the HTML fields and your JS code will work fine.

Hide a form after validation in AngularJs

I am working on a angular form and this is my first experience with Angular Form. I am able to submit the form successfully. But I want to do 2 more things:
Validate the form.
Hide the form if valid and show a div with confirmation.
Right now am able to hide the form using ng-click & ng-hide properties of the form. But I want this hiding to happen based on the validation. I am looking to validate email, by min & max length & required.
The form code:
<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
<div class="col-md-12"><h4 class="col-md-12" >What do you think?</h4></div>
<div class="form-group col-md-12">
<div class="row">
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option1" >
Option1
</label>
</div>
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option2" >
Option2
</label>
</div>
</div>
</div>
<div class="col-md-12 contact">
<h4 class="col-md-12" >Want us to contact you?</h4>
<div class="form-group">
<div class="textbox col-md-12">
<label>Name </label>
<input type="text" ng-model="formData.name" >
</div>
<div class="textbox col-md-12">
<label>Email </label>
<input type="text" ng-model="formData.email" >
</div>
<div class="textbox col-md-12">
<label>Phone </label>
<input type="text" ng-model="formData.phone" >
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div class="col-md-12 contact">
<button type="submit" class="btn btn-primary" ng-click="showConfirm = ! showConfirm">Submit</button>
</div>
</div>
</div>
</form>
<div class="col-md-12 confirmation" ng-show="showConfirm">
<h2 >Thanks alot for your feedback.</h1>
</div>
The js code:
$scope.processForm = function() {
$http.post('http://localhost/api/node.json', $scope.formData)
.success(function(data) {
$scope.formData = {};
$state.go('main.start');
});
};
Give your form a name and on ng-submit, check the validity of the form with the $valid property.
<form id="signup-form" name="signUpForm" novalidate ng-submit="signUpForm.$valid && processForm()" ng-hide="showConfirm">
Add validation attributes to your inputs. ex:
<input type="text" ng-model="formData.email" required>
Then once the form is submitted, set the showConfirm property to true
Read more about validation here https://docs.angularjs.org/guide/forms and http://www.ng-newsletter.com/posts/validations.html
Something similar to the following should work.
HTML
<form name="signup-form" class="signup-form" novalidate method="post" ng-submit="processForm()" ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid" >
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-lg" name="username" placeholder="Username" ng-model="user.username" ng-required="true">
<label>Email</label>
<input type="email" class="form-control input-lg" name="email" placeholder="Email" ng-model="user.email" ng-maxlength="20" ng-minlength="10" ng-required="true">
</div>
</form>
<div ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid">
</div>

how to validate two form of single page

I have Two Forms Here
First is here
<form class="form-horizontal form-signin" method="post" action="http://localhost:8080/job/create" id="submitUpdateProfileForm" >
<input type="hidden" name="actionType" value="updateJob" autocomplete="false" autofocus="false">
<div class="control-group">
<label class="control-label" for="txtJobId">Job Id</label>
<div class="controls">
<input type="text" id="txtJobId" name="txtJobId" placeholder="Job ID" value="18" readonly="readonly" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="txtJobName">Job Name</label>
<div class="controls">
<input type="text" id="txtJobName" name="txtJobName" placeholder="Job Name" value="" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="txtJobInstruction">Job Instruction</label>
<div class="controls">
<textarea id="txtJobInstruction" name="txtJobInstruction" placeholder="Job Instruction" required></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Create Quotation</button>
</div>
</div>
</form>
And Second Is Here
<form method="post" enctype="multipart/form-data" id="upload" action="http://localhost:8080/files/upload/">
<label for="users_file"> <strong><b> <font color="blue"> Please Select Image</font></b></strong>
<input type="file" name="users_file" id="users_file" accept="images/*" />
</label>
<div id="filedrag" style="padding: 28px;border: 2px dashed #000000;"> <strong><b><font color="blue">Or Drop Files Here</font></b></strong></div>
</form>
Question Is how to validate select image in create quotation? My problem is " this code create quotation without knowing image is uploaded or not"
If you want to say that the "create quotation" form should not be submitted if no files are selected in the "select image" of second form, then you can add onsumit attribute to your first form in this way
<form class="form-horizontal form-signin" method="post"
action="http://localhost:8080/job/create" id="submitUpdateProfileForm"
onsubmit="if (!document.getElementById('users_file').value.length>0){alert("Please upload a file!!");return false}else{return true}">
Here I am checking if the "users_file" input value is empty or not then submitting the form.
I hope this is what you were asking.

Categories

Resources