how to validate two form of single page - javascript

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.

Related

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" />

how to access different form elements in an HTML page using Angular JS without using Views of Angular JS

Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.
You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/

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>

Validate form before submitting -JSP

in my JSP page i created a form,
<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
action="genericDatabaseLoad" method="post" onsubmit="validateDBFom()">
<fieldset>
<input type="radio" name="connectionType" value="jdbcConnection"> <b><s:text name="global.genericdb_jdbc_connection" /></b>
<div class="dbConnection" id="jdbcConnection" style="display: none; position: relative; left: 30px;">
<div class="control-group">
<label class="control-label input-label" for="hostname"><s:text name="global.genericdb_hostname" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<input type="text" class="inputstyle" id="dbHostname" name="hostname" placeholder="<s:text name="global.genericdb_hostname" />" required="required" />
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="port"><s:text name="global.genericdb_port" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<input type="text" class="inputstyle" name="port" placeholder="<s:text name="global.genericdb_port" />" required="required" />
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="dbname"><s:text name="global.genericdb_databasename" />:</label>
<div class="controls">
<input type="text" class="inputstyle" name="dbname" placeholder="<s:text name="global.genericdb_databasename" />"
required="required" />
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="username"><s:text name="global.genericdb_username" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<input type="text" class="inputstyle" name="username" placeholder="<s:text name="global.genericdb_username" />" required="required" />
<label class="input-tip"><s:text name="global.genericdb_username_info" /></label>
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="password"><s:text name="global.genericdb_password" />:</label>
<div class="controls">
<input type="password" class="inputstyle" name="password" placeholder="<s:text name="global.genericdb_password" />" />
<label class="input-tip"><s:text name="global.genericdb_password_info" /></label>
</div>
</div>
</div>
<input type="radio" name="connectionType" value="jndiConnection"> <b><s:text name="global.genericdb_jndi_connection" /></b>
<div class="dbConnection" id="jndiConnection" style="display: none; position: relative; left: 30px;">
<div class="control-group">
<label class="control-label input-label" for="jndidbType"><s:text name="global.genericdb_jndi_databse" />:</label>
<div class="controls">
<select id="jndidbType" class="inputstyle" name="jndidbType">
<option value="oracle">Oracle</option>
<option value="sybase">Sybase</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label input-label" for="jndiConnectionString"><s:text name="global.genericdb_jndi_connection_string" />:</label>
<div class="controls">
<input type="text" class="inputstyle" name="jndiConnectionString"
placeholder="<s:text name="global.genericdb_jndi_connection_string" />" />
</div>
</div>
</div>
<div class="control-group" style="position: relative; top: 15px; left: 30px;">
<label class="control-label input-label" for="query"><s:text name="global.genericdb_query" /> :
<span class="requiredField"> * </span>
</label>
<div class="controls">
<textarea name="query" rows="4" placeholder="<s:text name="global.genericdb_query" />"
required="required" ></textarea>
<label class="input-tip"><s:text name="global.genericdb_query_info" /></label>
</div>
</div>
</fieldset>
</form>
As you can see there is no Submit button inside the form I am adding submit button outside of form.
<button type="submit" id="submitbtn" class="btn btn-primary inputstyle" onclick="submitForm();">SUBMIT</button>
So when I click on submit button, it will submit the form to struts action. JQuery is
JQuery is
<script>
function submitForm() {
var $submitform=$('#formId').val();
$('#'+$submitform).submit(); // $submitform is the id of the form.
}
</script>
Jquery to validate the form is
function validateDBFom()
{
var selectedVal = "";
var selected = $("input[type='radio'][name='connectionType']:checked");
if (selected.length > 0)
{
selectedValue = selected.val();
if(selectedValue=="jdbcConnection")
{
var $dbHostname=$("#dbHostname").val();
alert($dbHostname);
if($dbHostname==""||$dbHostname==null)
{
alert("Please fill host name");
return false;
}
}
}
else
{
alert("Please Select Connection Type.");
return false;
}
}
When I click on the submit button without selecting any radio button, it is displaying the correct message. That is, form validation is happening correctly. But if it return false also, the form is still submitting to action. What should I do to stay in the page without submitting if the validation function returns false?
You code is correct except this line
<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
action="genericDatabaseLoad" method="post" onsubmit="validateDBFom()">
you should use
<form class="form-horizontal" id="genericDatabaseLoad" name="genericDatabaseLoad"
action="genericDatabaseLoad" method="post" onsubmit="return validateDBFom();">
Notice changes in onsubmit

Rails Gem Client Side Validations html struct

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

Categories

Resources