Develop Reference

Disabling couple input area if dropdown equal to 1

I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown
I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing
HTML Code which will use for condition:
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
HTML Code Which i want to disable if slider_type equal to 1
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
I tried this JavaScript code lines for 1 input area but it's not worked
<script type="text/javascript">
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
</script>
What's really wrong?

You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.
Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.
function DisableSliderInputArea() {
if (document.getElementById("slider_type").value == "1") {
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");
// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

How to apply validation if input fields are empty?

I am applying validations to all the input where values are left blank. Whenever any input is blank and user will click on save button them we add class has-error and display message in small tag.
I have written following html.
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....
In jquery I am doing following validation on save button click
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
if(academicyearname == "")
{
$("#academicyearname").closest(".form-group").addClass( "has-error");
$("#year_nameHelp").removeClass('hide');
$("#academicyearname").focus();
}
else if(startson == "")
{
$("#startson").closest(".form-group").addClass( "has-error");
$("#start_dateHelp").removeClass('hide');
}
else if(endson == "")
{
$("#endson").closest(".form-group").addClass( "has-error");
$("#end_dateHelp").removeClass('hide');
}
....
The part
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
is not working accordingly. I mean it should be able to dynamically detect which inputs are empty and then add error class to the corresponding input where value is "".

You can use jquery validator js's blank element plugin and you can use it as follows:
$( "input:blank" ).css( "background-color", "#bbbbff" );
Have a look at below:
https://jqueryvalidation.org/blank-selector/
It also can be applied at id and class level.

Try using
var result = $("input:text").val().trim();
if(result == ""){
//do something
}

var vendorError = false;
$(".vendorForm input").each(function () {
if ($(this).val() == '') {
jAlert('Required', 'empty');
vendorError = true;
var div = document.getElementById($(this).attr('id'));
// show meg logic
if (div.style.display !== "block") {
div.style.display = "block";
}
return false;
}
})
if (vendorError) {
return false;
}
HTML file
<div id="vendorForm" class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="startson" value="" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="endson" value="" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....

I understood and somewhat same module i also designed. You can make the use of modal and give that id to in the js and on click button you can run the function in your js file. See my html page:
<div class="modal-body">
<div class="form-group">
<form id = "updateForm" onsubmit="return false" enctype="multipart/form-data">
<div class="left">
<div class="well img_height">
<img id="blah" src="admin_resources/images/user-icon.png"/>
</div>
<div>
<input type="file" name="myfile" onchange="readURL(this);" id="myfile"/>
</div>
</div>
<label for="emp_id">Employee Id:</label>
<input type="text" class="form-control" id="emp_id" name="employeeId" >
<p id="valid_msg_employee_id" class="error_message"></p>
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="firstName" name="firstName" >
<p id="valid_msg_fname" class="error_message"></p>
<label for="lname">Last Name:</label>
<input type="text"class="form-control" id="lastName" name="lastName">
<p id="valid_msg_lname" class="error_message"></p>
<label for="designation">Designation:</label> <br/>
<select name="designation" id="dropdown" class="form-control">
<option value="Select">Select Designation</option>
<option value="manager">Manager</option>
<option value="HR">HR</option>
<option value="Tech Lead">Tech Lead</option>
<option value="QA Lead">QA Lead</option>
<option value="Developer">Developer</option>
<option value="QA-Automation">QA-Automation</option>
<option value="QA-Manual">QA-Manual</option>
<option value="Software Trainee">Software Trainee</option>
<option value="Sr. Software Quality Engineer">Sr. Software Quality Engineer</option>
<option value="SQE">SQE</option>
<option value="Software Quality Engineer">Software Quality Engineer</option>
<option value="Associate Software Engineer">Associate Software Engineer</option>
<option value="QA Manager">QA Manager</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<label for="Doj">Joining Date:</label>
<input type="text" class="form-control" id="doj" name="yearOfJoining" >
<p id="valid_msg_year" class="error_message"></p>
<label for="status">Status:</label> <br/>
<select name="status" id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">inactive</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<p id="valid_msg_year" class="error_message"></p>
<label for="email_id">Email-id:</label>
<input type="email" class="form-control" id="email" name="email">
<p id="valid_msg_email" class="error_message"></p>
<label for="quali">Contact:</label>
<input type="text" class="form-control" id="contact" name="mobileNo">
<p id="valid_msg_contact" class="error_message"></p>
<button type="submit" class="btn btn-default" onclick="updateEmployeeDetail();" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-default" onclick = "deleteEmployee();" data-dismiss="modal">Delete</button>
</form>
</div>
</div>
and you can now add a class "erro_message which will be called on the modal:
the js file is this:
function employeeDetail() {
$("#submit_emp").click(function(event) {
var formValid = employeeDetail.formValidation();
if (formValid) {
var formvalue = new FormData($('#addForm')[0]);
$.ajax({
url: "intranet/addEmployee",
type: "POST",
data: formvalue,
contentType: false,
processData: false,
success: function(response) {
$('#your-modal').modal('toggle');
$("#header_success").empty();
$("#header_success").append("Response");
$("#message_success").empty();
$("#message_success").append(response.message);
$('#addForm').trigger("reset");
},
error: function(e) {
$('#your-modal').modal('toggle');
$("#message_success").empty();
$("#message_success").append(e.message);
}
});
} else {
return false;
}
});
You can add many validations on this input type and can append the messge ypuwant on that particular fied:
Hope this might help you.

This is super simplistic and does NOT do the "validation" by checking for example numeric values, etc. but you wanted/asked for the selector for empty text inputs so this gives that.
// put on some event, used change here:
$('input[type=text]').on('change', function() {
// just clear all
$(".form-group").removeClass("has-error");
$("small").addClass('hide');
// filter those empty ones
$('input[type=text]').filter(function() {
return $(this).val().trim() == "";
}).each(function() {
$(this).closest(".form-group").addClass("has-error");
$(this).parent().find("small").removeClass('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">Academic Year is Required</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text" >
<small id="start_dateHelp" class="text-danger hide">Start Date is Required</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"> <i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" >
<small id="end_dateHelp" class="text-danger hide">End Date is Required</small>
</div>
</div>
</div>

How to dynamically create text boxes on selection of a dropdown

I am new to web development and I am developing a form in HTML using Bootstrap.So I have a div like below:
<div class="form-group">
<label class="col-md-4 control-label" >Users</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select the number of users</option>
<option>1</option>
<option>2</option>
<option >3</option>
</select>
</div>
</div>
</div>
So depending on the selection of number I want to dynamically create the text box like below div.
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="phone" placeholder="Username" class="form-control" type="text">
</div>
</div>
</div>
For example if he selects 1 then one text box should appear if selects 2 then 2 should appear.Any help is appreciated.

Try this
$('.selectpicker[name=state]').change(function() {
var i = 0;
//$('.input-group').children('input').remove() *for reset the inbox on change*
while (i < parseInt($(this).val())) {
$('.input-group').append('<input name="phone" placeholder="Username" class="form-control" type="text">')
i++;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label">Users</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<select name="state" class="form-control selectpicker">
<option value=" " >Please select the number of users</option>
<option>1</option>
<option>2</option>
<option >3</option>
</select>
</div>
</div>
</div>

Alert User field that is blank is required

Problem: I would like to be able to alert the user if a particular field is empty. Here is how the form looks:
When the user enters a zip code and selects search, I would like a pop up to display to alert the user to select a distance and not display the results. If the user enters hospital name and city drop down, I do not want the alert to appear. Only when the zip code is entered and when the search button is selected.
Here is the form:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<option></option><option >5</option><option>10</option><option>15</option><option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
and here is the script that alerts when the miles is blank:
function validateForm() {
var x = document.forms["UrgentCareSearch"]["distance"].value;
if (x == "" || x=="null") {
alert("Please select distance");
return false;
}
UPDATE
I have done the following and it still does not work the way I want to (which is to show the alert when the search button is entered and when the user has entered a zip code. Meaning once the user has entered a zip code and click on the search button to populate the results, the alert will appear notifying to select the miles and the results will not show until user has entered how many miles and click search again):
function validateForm() {
var x = document.forms["UrgentCareSearch"]["miles"].value;
var $zip = $('#zip');
if ((x == "" && $zip != "") ||(x=="null" && $zip != "")) {
alert("Please select distance");
return false;
}
and this is what I when I used required:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return checkTextField()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
<option value=""></option><option >5</option><option>10</option><option>15</option><option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>

adding required to each of the input or select elements would prevent the form from being submitted if they are left blank
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" required /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City" required>
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
<option></option><option >5</option><option>10</option><option>15</option><option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
Or there can jquery touch look at this
first give your form an id lets say myform
$(document).ready(function()
{
$('#myform').submit(function()
{
var name = $("#hospital").val();
var name = $("#city").val();
if(name == "" || name == " ")
{
alert("Please enter name");
return false;
}
if(city == "" || city== " ")
{
alert("Please enter city");
return false;
}
//Just like this and at the end when you are satisfied
$(this).submit();
});
});

From what I understand by your problem statement, you can do the following in your validation function.
function validateForm() {
var miles = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if (zip && !miles) {
event.preventDefault(); // This will prevent the form submit
alert("Please enter the Miles.");
return false; // Does't submit the form (for IE)
}
}
Also, when calling the function, just call the function directly.
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="validateForm();">

Cordova app form input fields lagging in showing data while entering

I have created a cordova app using node, angular, sqlite. The app consist of multipage form. When i fill the form then input fields are lagging means they are taking time to show the entered data. Can anyone tell me the reasons why these issues comes.
My farm page is quite big means it consist large no. of fields which are divided in four parts and i am showing them 1 by 1 after by making others hide and then submitting it in the end.
this is the form
<form name="signupForm" data-ng-submit="gotoAddress()">
<div class="col-sm-12 col-xs-12 top-bottom-border"> <span class="heading">Personal Info</span>
</div>
<div class="col-sm-12 col-xs-12">
<div class="form-group form-group-custom">
<label class="form-tags-info-page" for="name">Name</label>
<br>
<input class="form-control" id="input-elements-info-page" placeholder="name" type="text" name="ufname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.name" required>
<div class="help-block" spellcheck="false" autocomplete="off">
<p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.required">Name is required</p>
<p style="color: red" ng-show="signupForm.ufname.$dirty && signupForm.ufname.$touched && signupForm.ufname.$error.pattern">Enter a valid Name</p>
</div>
</div>
<div class="col-sm-12 col-xs-12 remove-all-padding">
<div class="form-group col-sm-6 col-xs-6 remove-all-padding age-group" ng-class="{ 'has-error' : submitted && signupForm.age.$invalid }">
<label class="form-tags-info-page" for="age">Age(in year)</label>
<br>
<input name="age" class="form-control" id="input-elements-info-page" type="number" ng-model="myForm.age" min="14" max="120" required>
<span class="help-block" style="color:red" ng-show="signupForm.age.$dirty && signupForm.age.$invalid">
<span style="color:red" ng-show="signupForm.age.$error.required">Required!</span>
<span style="color:red" ng-show="signupForm.age.$error.min">Minimum 14</span>
<span style="color:red" ng-show="signupForm.age.$error.max">Invalid Age!</span>
</span>
</div>
<div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right">
<label class="form-tags-info-page" for="sex">Sex</label>
<br>
<select class="form-control" id="input-elements-info-page" ng-model="myForm.sex" required>
<option value="" selected disabled>Select Sex</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.ownership.$invalid }">
<label class="form-tags-info-page">Ownership</label>
<select name="ownership" data-ng-model="myForm.ownership" id="input-elements-info-page" placeholder="Select Annual Income" class="form-control" required>
<option value="" selected disabled>Select Ownership</option>
<option value="Owner">Owner</option>
<option value="Successor">Successor</option>
<option value="Blood-relative">Blood-relative</option>
<option value="Contract-farmer">Contract-farmer</option>
</select>
<div ng-show="submitted && signupForm.ownership.$invalid" class="help-block">
<p ng-show="signupForm.ownership.$error.required">Annual Income is required</p>
</div>
</div>
<div class="form-group">
<label class="form-tags-info-page" for="name">Father's Name</label>
<br>
<input class="form-control" id="input-elements-info-page" placeholder="father's name" type="text" name="fname" ng-pattern="/^[a-zA-Z0-9\-\s\,]{1,100}$/" ng-model="myForm.fathername" required>
<div class="help-block">
<p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.required">Father's Name is required</p>
<p style="color: red" ng-show="signupForm.fname.$dirty && signupForm.fname.$touched && signupForm.fname.$error.pattern">Enter a valid Father's Name</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.mobile_no.$invalid }">
<label class="form-tags-info-page" for="mobile">Mobile Number</label>
<br>
<input class="form-control" id="input-elements-info-page" type="number" name="mobile_no" placeholder="Mobile No" ng-model="myForm.mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required>
<span class="help-block" style="color:red" ng-show="signupForm.mobile_no.$dirty && signupForm.mobile_no.$invalid">
<span style="color:red" ng-show="signupForm.mobile_no.$error.required">Required!</span>
<span style="color:red" ng-show="signupForm.mobile_no.$error.minlength">Too short!</span>
<span style="color:red" ng-show="signupForm.mobile_no.$error.maxlength">Too long!</span>
<span style="color:red" ng-show="signupForm.mobile_no.$error.pattern">Invalid Mobile Number</span>
</span>
</div>
<div class="form-group" ng-class="{ 'has-error' : submitted && signupForm.alt_mobile_no.$invalid }">
<label class="form-tags-info-page" for="mobile">Alternate Mobile Number</label>
<br>
<input class="form-control" id="input-elements-info-page" type="number" name="alt_mobile_no" placeholder="Alternate Mobile No" ng-model="myForm.alt_mobile_no" ng-minlength="10" ng-maxlength="10" ng-pattern="/^[7-9]{1}[0-9]{9}/" required>
<span class="help-block" style="color:red" ng-show="signupForm.alt_mobile_no.$dirty && signupForm.alt_mobile_no.$invalid">
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.required">Required!</span>
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.minlength">Too short!</span>
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.maxlength">Too long!</span>
<span style="color:red" ng-show="signupForm.alt_mobile_no.$error.pattern">Invalid Mobile Number</span>
</span>
</div>
<div class="form-group">
<label class="form-tags-info-page" for="email">Email Id(optional)</label>
<br>
<input class="form-control" id="input-elements-info-page" placeholder="Email" type="email" ng-pattern="/^[A-Za-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/" ng-model="myForm.email">
<div class="help-block">
<p style="color: red" ng-show="signupForm.email.$dirty && signupForm.email.$touched && signupForm.email.$error.pattern">Enter a valid email address</p>
</div>
</div>
<div class="form-group">
<label class="form-tags-info-page" for="size">Family Size</label>
<br>
<select class="form-control" id="input-elements-info-page" ng-model="myForm.family_size" required>
<option value="" selected disabled>Select Family Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">>10</option>
</select>
</div>
<form class="form-inline col-sm-12 col-xs-12 remove-all-padding">
<div class="form-group col-sm-6 col-xs-6 age-group remove-all-padding">
<label class="form-tags-info-page" for="land">LandArea</label>
<br>
<input class="form-control" id="input-elements-info-page" style="width:100%;" type="number" required ng-model="myForm.l_area">
</div>
<div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group pull-right">
<label class="form-tags-info-page" for="size">Unit</label>
<br>
<select class="form-control" id="input-elements-info-page" style="width:100%;" ng-model="myForm.area_unit" required>
<option value="" selected disabled>Select Unit</option>
<option value="Acre">Acre</option>
<option value="Hactare">Hactare</option>
<option value="Bigha">Bigha</option>
</select>
</div>
</form>
<div class="form-group">
<label class="form-tags-info-page" for="size">Language Preference</label>
<br>
<select class="form-control" id="input-elements-info-page" ng-model="myForm.language" required>
<option value="" selected disabled>Select Language</option>
<option value="english">English</option>
<option value="hindi">Hindi</option>
<option value="others">Others</option>
</select>
</div>
<form class="form-inline col-sm-12 col-xs-12 remove-all-padding">
<div class="form-group col-sm-6 col-xs-6 remove-all-padding ">
<label class="form-tags-info-page col-sm-12 col-xs-12" for="uid_type">ID Type</label>
<br>
<select class="form-control col-sm-12 col-xs-12" id="input-elements-info-page" style="width:100%;" ng-model="myForm.farmerid_type">
<option value="" selected disabled>Select id Type</option>
<option value="Aadhar">Aadhar</option>
<option value="VoterID">VoterID</option>
<option value="Driving Licence">Driving Licence</option>
</select>
</div>
<div class="form-group col-sm-6 col-xs-6 remove-all-padding sex-group">
<label class="form-tags-info-page" for="uid_no">ID No.</label>
<br>
<input class="form-control" id="input-elements-info-page" type="text" style="width:100%;" ng-model="myForm.farmeruid_no" required>
</div>
</form>
<div class="col-sm-12 col-xs-12 remove-all-padding">
<div class="col-sm-12 col-xs-12 camera-img-wrapp">
<div class="col-sm-6 col-xs-6"> <span ng-click="takePic()" class="glyphicon glyphicon-camera camera-pic"></span>
</div>
<div class="col-sm-6 col-xs-6"> <span ng-click="takeScan();" class="glyphicon glyphicon-camera camera-pic"></span>
</div>
</div>
<div class="col-sm-12 col-xs-12">
<div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;">
<p class="form-tags-info-page">Take Pic</p>
</div>
<div class="col-sm-6 col-xs-6" style="text-align:center;font-weight:bold;">
<p class="form-tags-info-page">Take Scan</p>
</div>
</div>
</div>
<div class="form-group col-sm-12 col-xs-12 remove-all-padding" ng-show="imageSrc || scanSrc">
<div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="imageSrc"><img src="" id="myImage" style="width:100px;height:100px;"></span>
</div>
<div class="col-sm-4 col-xs-4 col-sm-offset-2 col-xs-offset-2"> <span ng-show="scanSrc"><img src="" id="myScan" style="width:100px;height:100px;"></span>
</div>
</div>
<div class="form-group col-sm-12 col-xs-12">
<div class="btn-group btn-next">
<input class="btn btn-primary btn-lg" type="submit" value="Next">
</div>
</div>
</div>
</form>
on creating android app fields name,fathername are lagging. they are showing the data we are entering after few seconds which is too much.

Since you are not going into very much detail with your question, I cant go into detail with my answer.
Ill try to explain where your issues might come from and adjust my answer if you provide more information:
Cordova uses WebView container in a native App which basicly uses the same engine for rendering as your mobile browser. The performance bottleneck of browsers is accessing of DOM elements (causing reflow and rerendering). Therefore you have to be very aware of the performance issues it can create communicating with DOM api. If Your DOM changes take more than 16 ms to render your application becomes visibly slow and sluggish. Going down from 60 fps your performance issues get more and more obvious to the user.
Since mobile devices are alot slower than desktop computers you will have to be very cautious about alot of things.
There are alot of performance hacks you can apply to your mobile web app.
here are some: https://quickleft.com/blog/4-steps-to-minimizing-rendering-issues-in-cordova-applications/
With ReactJs and overuse of CSS transitions you can achive ~60fps applications that almost seem to be native. I have made good experiences with this.
EDIT1: My Hint:
rebuild your Frontend with ReactJs and avoid overuse of frameworks. Keep your DOM structure clean and do animations with CSS (try to avoid js based animations as much as you can!). Measure your FPS while you develop and find performance issues straight away. To build a nice performant nativelike app you will find no way arround this approach.
I hope this helped.