Develop Reference

integrating dropzone with normal form

I have successfully integrated dropzone with my form using jquery. However, I have an issue with validation of the other form inputs. It seems the other form inputs do not respect the validation such as "required". I also tried using parsley for validation but does not work. when I remove the dropzone field, the validation works well.
Here is the form.
<form class="form-vertical"
id="createPropertyForm"
enctype="multipart/form-data"
method="POST"
>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Country</label>
<div class="inputGroupContainer">
<input id="country"
name="country" placeholder="Country" class="form-control" required
value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">County</label>
<div
class="inputGroupContainer">
<input id="county"
name="county" placeholder="County" class="form-control" required value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Town</label>
<div class=" inputGroupContainer">
<input id="town" name="town"
placeholder="Town" class="form-control" required value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Postcode</label>
<div class="inputGroupContainer">
<input id="postcode"
name="postcode" placeholder="Postcode" class="form-control" required
value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Description</label>
<div class=" inputGroupContainer">
<textarea id="description"
name="description" placeholder="Description" class="form-control"
required="true" value="" type="text"></textarea>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Address</label>
<div class="inputGroupContainer">
<input id="address" name="address"
placeholder="Address" class="form-control" required value="" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Bedrooms</label>
<div class=" inputGroupContainer">
<select class=" form-control"
name="bedrooms" id="bedrooms" required>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label
">Bathrooms</label>
<div class=" inputGroupContainer">
<select
class="selectpicker bathrooms form-control" name="bathrooms"
id="bathrooms"
required>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Price</label>
<div class="inputGroupContainer">
<input id="price" name="price"
placeholder="Price" class="form-control" required value="" type="number">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Property Type</label>
<div class=" inputGroupContainer">
<select
class="selectpicker form-control" name="propertyType" id="propertyType">
<option
value="">Choose type</option>
<?php
foreach
($propertyTypes as $propertyType) {
?>
<option value="<?=
$propertyType->id ?>"><?= $propertyType->title ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Type</label>
<div class="col-md-12">
<div class="col-md-6 ">
<label><input type="radio"
name="type" class="form-control type" required>Sale</label>
</div>
<div class="col-md-6">
<label><input type="radio"
name="type" class="form-control type" required>Rent</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Upload Image</label>
<div class=" inputGroupContainer">
<div class="dropzone"
id="create-dropzone" >
<div class="fallback">
<input name="file"
type="file" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="dropzone-previews"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success btn-lg"
type="submit" id="submitCreateForm"> Submit </button>
</div>
</form>.
Here is the jquery code:
// Parsley for form validation
$('#createPropertyForm').parsley();
$('#editPropertyForm').parsley();
Dropzone.options.createDropzone = {
url: `${baseUrl}administrator/properties`,
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFileSize:2048,
uploadMultiple: false,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submitCreateForm");
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
e.preventDefault();
if (wrapperThis.files.length) {
wrapperThis.processQueue();
} else {
wrapperThis.submit();
}
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button class='btn btn-block btn-danger'><i class='fa-times fa'></button>");
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('sending', function (data, xhr, formData) {
formData.append("country", $("#country").val());
formData.append("county", $("#county").val());
formData.append("town", $("#town").val());
formData.append("postcode", $("#postcode").val());
formData.append("description", $("#description").val());
formData.append("address", $("#address").val());
formData.append("bathrooms", $("#bathrooms").val());
formData.append("price", $("#price").val());
formData.append("bedrooms", $("#bedrooms").val());
formData.append("propertyTypeId", $("#propertyType").val());
formData.append("type", $(".type").val());
});
this.on('success', function (files, response) {
toastr.success(response.message);
setTimeout(function () {
location.reload();
}, 1000);
});
this.on('error', function (file, error, xhr) {
file.status = 'queued';
if (xhr.status === 422){
toastr.error('An error occurred, please confirm that you have filled all inputs and try again');
}else{
toastr.error('An error occurred');
}
});
this.on("maxfilesexceeded", function(file) {
wrapperThis.removeFile(file);
});
}
};

How to add multiple sections[] and subfeilds[] inside fields[] in vue js html?

How to add multiple sections[] and subfields[] inside fields[]?
My HTML form:
<div class="col-md-12 mr-auto" id="regBox">
<form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">room</i>
</span>
</div>
<select class="form-control" v-model="type" name="type" required="">
<option value="" selected disabled hidden>Choose Type here</option>
<option value="option">option</option>
<option value="text">text</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">account_circle</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Rule Name" v-model="text" required="" maxlength="20">
</div>
</div>
<div class="card-content" v-for="(bok, index) in feilds" :key="index">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">face</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Name..." v-model="bok.name" required="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">face</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Section..." v-model="bok.sections[0]" required="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">face</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Name..." v-model="bok.subfeilds[0].name" required="">
</div>
</div>
<h3>The JSON value of <code>bok</code></h3>
<textarea rows="3" cols="75%" readonly>{{ JSON.stringify(bok) }}</textarea>
</div>
<a #click="addNewRules">Add Another Rule</a>
<div class="text-center">
<button class="btn btn-primary btn-round">Get Started</button>
</div>
</form>
</div>
VueJS code:
regBox = new Vue({
el: "#regBox",
data: {
type:'',
text:'',
feilds : [{
name : null,
sections:[null],
subfeilds : [{name:null}],
}],
},
methods: {
addNewRules: function() {
this.feilds.push({ name : null,
sections:[null],
subfeilds : [{name:null}],
});
},
handelSubmit: function(e) {
var vm = this;
data = {};
data['feilds'] = this.feilds;
data['type'] = this.type;
data['text'] = this.text;
$.ajax({
url: 'http://localhost:4000/add/act/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status)
{
alert("Registration Success");
}
else {
alert("Registration Failed");
vm.response = e;
}
}
});
return false;
},
},
});
My problem arises when I add fields[]. sections[] should be an array so, how can I add multiple sections inside fields . Also how can I add multiple subfields inside the fields[].
The code provided was perfectly working. The only issue is that I am not able to have multiple sections[] and subfields[], which is required.

<form class="form" method="POST" v-on:submit.prevent="handelSubmit($event);"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">room</i> </span> </div> <select class="form-control" v-model="type" name="type" > <option value="" selected disabled hidden>Choose Type here</option> <option value="option">option</option> <option value="text">text</option> </select> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">account_circle</i> </span> </div> <input type="text" class="form-control" placeholder="Rule Name" v-model="text" maxlength="20"> </div> </div> <div class="card-content" v-for="bok in feilds"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" placeholder="Username..." v-model="bok.name" > </div> </div> <div v-for="child in bok.subfeilds"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" placeholder="Offences..." v-model="child.name" > </div> </div> </div> <a class="btn btn-success" #click="addChild(bok)">Add Offence</a> <div v-for="(secure,index) in bok.sections"> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="material-icons">face</i> </span> </div> <input type="text" class="form-control" placeholder="Section..." v-model="bok.sections[index]" > </div> </div> </div> <a class="btn btn-success" #click="addSection(bok)">Add</a> <h3>The JSON value of <code>bok</code></h3> <textarea rows="3" cols="75%" class="form-control" readonly>{{ JSON.stringify(bok) }}</textarea> </div> <a #click="addNewRules">Add Another Rule</a> <div class="text-center"> <button class="btn btn-primary btn-round">Get Started</button> </div> </form>
regBox = new Vue({
el: "#regBox",
data: {
type:'',
text:'',
feilds : [{
name : null,
sections:[],
subfeilds : [{name:null}],
}],
},
methods: {
addNewRules: function() {
this.feilds.push({ name : null,
sections:[],
subfeilds : [{name:null}],
});
},
addChild: function(bok) {
bok.subfeilds.push({});
},
addSection: function(bok) {
bok.sections.push({});
},
handelSubmit: function(e) {
var vm = this;
data = {};
data['feilds'] = this.feilds;
data['type'] = this.type;
data['text'] = this.text;
$.ajax({
url: 'http://localhost:4000/add/act/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status)
{
alert("Registration Success");
}
else {
alert("Registration Failed");
vm.response = e;
}
}
});
return false;
},
},
});
I have added loops in each case. Just check this was what you expected

How to show the modal in without reloading the page

Here i did form validation ,after form validation all fields filled and click the INVITE QUOTES button means i want show modal, and i want to fill the modal form after filled all field means i want to close that modal,but dont want to refresh the page,Here i click INVITE QUOTES button means page is refreshing and modal is not showing how can do this?
<script>
/*$('#businessForm').submit(function (e) {
e.preventDefault();
validateForm();
});*/
function validateForm() {
var ratesfor = document.forms["myForm"]["ratesfor"].value;
if (ratesfor == null || ratesfor == "") {
document.getElementById("rate_err").innerHTML = "Field is empty";
}
var no = document.forms["myForm"]["no"].value;
if (no == null || no == "") {
document.getElementById("no_err").innerHTML = "Field is empty";
}
var breath = document.forms["myForm"]["breath"].value;
if (breath == null || breath == "") {
document.getElementById("b_t_err").innerHTML = "Field is empty";
}
var height = document.forms["myForm"]["height"].value;
if (height == null || height == "") {
document.getElementById("height_err").innerHTML = "Field is empty";
}
var truck_type = document.forms["myForm"]["truck_type"].value;
if (truck_type == null || truck_type == "") {
document.getElementById("truck_type_err").innerHTML = "Field is empty";
}
var datepicker = document.forms["myForm"]["datepicker-13"].value;
if (datepicker == null || datepicker == "") {
document.getElementById("pickup_err").innerHTML = "Field is empty";
}
var myTime = document.forms["myForm"]["myTime"].value;
if (myTime == null || myTime == "") {
document.getElementById("time_err").innerHTML = "Field is empty";
}
var from = document.forms["myForm"]["from"].value;
if (from == null || from == "") {
document.getElementById("from_err").innerHTML = "Field is empty";
}
var to = document.forms["myForm"]["to"].value;
if (to == null || to == "") {
document.getElementById("to_err").innerHTML = "Field is empty";
return false;
}
else{
$('#businessForm').submit(function (e) {
e.preventDefault();
})
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
}
}
</script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#Register").click(function(){
$("#myModal").hide();
$("#myModal_Register").modal();
});
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Rates For</label>
<input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
<span id="rate_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="length">Length</label>
<input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="length"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="breadth">Breadth</label>
<input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="breadth"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="height">Height</label>
<input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="height"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Type Of Truck</label>
<select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
<option value="feet">feet</option>
<option value="mm">mm</option>
<option value="mtr">mtr</option>
</select><span id="truck_type_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="date">Date of PickUp</label>
<br>
<input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
<span id="pickup_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="time">Time of PickUp</label>
<br>
<input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
<span id="time_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="experience">Destination</label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
<option value="">From</option>
<option value="1">Ahmedabad</option>
<option value="2">Bangalore</option>
</select>
</div>
<span id="from_err"></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="experience"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
<option value="">To</option>
<option value="1">Guragon</option>
<option value="2">Hyderabad</option>
</select>
</div>
<span id="to_err"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
</div>
</div>
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
<div class="modal-footer">
<p>Not a member? <b>Sign Up</b>
</p>
<!--<p>Forgot Password?</p>-->
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
<!--#####
Register From Start
#####--->
<div class="modal fade" id="myModal_Register" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Registration</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Confirm Password</label>
<input type="text" class="form-control" id="psw" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-info btn-block">Submit</button>
</form>
</div>
<!-- <div class="modal-footer">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>-->
</div>
</div>
</div>
</div>

Bro check this line:
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
here you are using button type submit, submit button will submit the form and reloads the page. Instead use:
<button type="button" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>

After form submitted, form validation just skip success after submitting form successfully

I am submitting the data of a form using formData because there are some files in my from. Once when I am submitting the form its just skip success after submitting form successfully.
Its occur once when,i am trying to use Html 5 ajax validation for my form.
But When I am trying to use custom validation its working fine.
Js Code are:-
function propertyDetails() {
$('#submitPropertyDetails').click(function () {
if (window.FormData !== undefined) {
if (isValidPropertyDetails() && getPropertyFormData() != null) {
showLoading();
$.ajax({
url: '/Member/PropertyDetails',
type: "POST",
contentType: false,
processData: false,
data: getPropertyFormData(),
success: function (result) {
setAmentiesDetails(result);
hideLoading($('#propertyDetails')[0]);
},
error: function (jqXhr) {
alert(jqXhr.statusText);
$errors = jqXhr.responseJSON;
hideLoading($('#propertyDetails')[0]);
}
});
}
}
else {
alert("FormData is not supported.");
}
});
};
function getPropertyFormData() {
// Create FormData object
var form = $('#propertyDetails')[0];
var officeTypeDetails = new FormData(form);
return officeTypeDetails;
};
var isValidPropertyDetails = function () {
if ($('#propertyDetails')[0].checkValidity()) {
return true;
}
else
return false;
};
My Html Code is:-
<form method="post" id="propertyDetails">
<div class="col-md-8 slid-spaceDetailsMiddleColumn">
<div class="form-group">
<div class="col-md-12">
<div class="col-md-3">
<label class="textColor">Looking for</label>
</div>
<div class="col-md-3">
<div class="col-md-7">
<input class="form-control" data-val="true" data-val-number="The field PropertySubTypeId must be a number." id="PropertySubTypeId" name="PropertySubTypeId" required="" type="radio" value="2">
</div>
<div class="col-md-5">
<label class="textColor">Dental</label>
</div>
</div>
<div class="col-md-3">
<div class="col-md-7">
<input class="form-control" id="PropertySubTypeId" name="PropertySubTypeId" required="" type="radio" value="1">
</div>
<div class="col-md-5">
<label class="textColor">Medical</label>
</div>
</div>
<div class="col-md-3">
<div class="col-md-7">
<input class="form-control" id="PropertySubTypeId" name="PropertySubTypeId" required="" type="radio" value="3">
</div>
<div class="col-md-5">
<label class="textColor">Genral</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<br>
<input class="form-control" data-val="true" data-val-number="The field RentableSquareFeet must be a number." id="RentableSquareFeet" name="RentableSquareFeet" placeholder="Rentable Square Feet" required="" type="text" value="">
<br>
</div>
<div class="col-md-4">
<br>
<input class="form-control" data-val="true" data-val-number="The field UsableSquareFeet must be a number." id="UsableSquareFeet" name="UsableSquareFeet" placeholder="Usable Square Feet" required="" type="text" value="">
<br>
</div>
<div class="col-md-4">
<br>
<input class="form-control" data-val="true" data-val-date="The field AvilableDate must be a date." id="AvilableDate" name="AvilableDate" placeholder="Avilable Date" required="" type="text" value="">
<br>
</div>
</div>
<div class="col-lg-10">
<div class="form-group">
<div class="col-md-offset-12">
<button class="btn btn-info" id="submitPropertyDetails" type="submit" value="Submit">
Continue
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 slid-sideMediaSmallColumn">
<br>
<video width="100%" height="160px" controls="" autoplay="autoplay">
<source src="/UploadVideo/hubToBidVideo.png" type="video/mp4">
</video>
<div class="form-group">
<div class="col-md-12">
<input type="file" id="Video" name="Video" class="form-control">
</div>
</div>
</div>
</form>

ADD button is still disabled, even after the validation is satisfied

I have been working on the below screen where I have a drop down for selecting a file/folder type(file type being default). When I Provide a valid file Path first, the ADD button is not getting enabled. After, I select the Folder from drop down and provide a valid folder path , then the ADD button is getting enabled. I think , the Problem is with the validation I'm using i.e.:ng-disabled="conditionForm.$invalid" Can you tell me where I am doing the mistake !!? Providing Code and screen shots below.
<form name="conditionForm" class="form-horizontal" role="form" novalidate="novalidate">
<div class="form-group">
<label class="col-sm-2 control-label no-padding-right">Type :</label>
<div class="col-sm-3" style="width:110px">
<select name="fileorfoldertype" id="ddlFileOrFolderType" class="form-control" ng-init="fileorfoldertype = fileorfoldertypes[0]" style="width:100px" ng-model="fileorfoldertype" ng-options="fileorfolderpath as fileorfolderpath.name for fileorfolderpath in fileorfoldertypes" ng-change="change()" required></select>
</div>
<div class="form-group" id="filepath">
<label class="col-sm-2 control-label no-padding-right">File Path:</label>
<div>
<div class="col-sm-3" style="border:0px solid red;">
<input name="filespath" id="txtfilepath" type="text" class="form-control" ng-model="filespath" ng-pattern="/^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.txt|.doc|.xls|.gif|.GIF|.exe|.pdf|.xml|.cvv|.dll)$/" required>
</div>
<div class="col-sm-3">
<p ng-show="conditionForm.filespath.$error.required" class="help-block" style="display: inline; float: left;">File Path is required and cannot be empty.</p>
<p ng-show="conditionForm.filespath.$error.pattern" class="help-block" style="display: inline; float: left;">The input is not a valid File Path.</p>
</div>
</div>
</div>
<div class="form-group" id="folderpath" style="display:none">
<label class="col-sm-2 control-label no-padding-right">Folder Path:</label>
<div>
<div class="col-sm-3" style="border:0px solid red;">
<input name="folderspath" id="txtfolderpath" type="text" class="form-control" ng-model="folderspath" ng-pattern="/^([A-Z|a-z]:\\[^*|><>?\n]*)|(\\\\.*?\\.*)$/" required>
</div>
<div class="col-sm-3">
<p ng-show="conditionForm.folderspath.$error.required" class="help-block" style="display: inline; float: left;">Folder Path is required and cannot be empty.</p>
<p ng-show="conditionForm.folderspath.$error.pattern" class="help-block" style="display: inline; float: left;">The input is not a valid Folder Path.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="addbutton" class="col-sm-3" style="padding-left:590px;">
<button style="width:70px" class="btn" type="submit" ng-disabled="conditionForm.$invalid" ng-click="add()">
Add
</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<div class="col-sm-10 mail-container">
<div class="mail-header">
<ul class="header-buttons">
<li>
<a class="tooltip-primary" ng-click="deleteCondition()"><i class="glyphicon glyphicon-remove"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-10" id="divGrid">
<table id="jQFileManagement"></table>
<div id="jqGridPager"></div>
</div>
</div>
</div>
</form>
$scope.fileorfoldertypes = [
{ id: "0", name: "File" },
{ id: "1", name: "Folder" },
];
$scope.change = function () {
if ($scope.fileorfoldertype.id === '0')
{
$("#folderpath").hide();
$("#filepath").show();
document.getElementById('txtfilepath').value = "";
document.getElementById('txtfolderpath').disabled = true;
document.getElementById("txtfilepath").disabled = false;
}
else if ($scope.fileorfoldertype.id === '1') {
$("#folderpath").show();
$("#filepath").hide();
document.getElementById('txtfolderpath').value = "";
document.getElementById('txtfilepath').disabled = true;
document.getElementById("txtfolderpath").disabled = false;
}
}
$scope.add = function () {
var filetype;
if ($scope.fileorfoldertype.id == "1") {
filetype = 1;
folderOrFilePath = $scope.folderspath;
var folderdata = {
typeId: filetype,
folderOrFilePath: $scope.folderspath
}
}
else {
filetype = 2;
folderOrFilePath = $scope.filespath;
var folderdata = {
typeId: filetype,
folderOrFilePath: $scope.filespath
}
}
selectedfolders.unshift(folderdata);
if (selectedfolders != "") {
$("#jQFileManagement")
.jqGrid('setGridParam',
{
datatype: 'local',
data: selectedfolders
})
.trigger("reloadGrid");
}
$scope.filespath = '';
$scope.folderspath = '';
$scope.conditionForm.$invalid = true;
};