I'm switching my form validation from thymeleaf to angularjs and I have some problem with daterangepicker. For angular I read about datarangepicker for angular so I would like to use it to store startdate and enddate in my form field.
This is my HTML modal code:
<div class="modal" id="addLicenseModal" data-ng-app="myApp">
<div class="modal-dialog" id="addLicenseModaController" data-ng-controller="freeUserController">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">New license</h4>
</div>
<div class="modal-body">
<div data-ng-show='users.length > 0'>
<form novalidate class="simple-form" name="newLicenseForm">
<!-- form start -->
<div class="box-body">
<div class="form-group" id=existingUser>
<label>Username</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newLicense.username" required> <ui-select-match
placeholder="Select username">
{{$select.selected.username}}</ui-select-match> <ui-select-choices
repeat="user.username as user in (users | filter: $select.search) track by user.username">
<span data-ng-bind="user.username"></span> </ui-select-choices> </ui-select>
</div>
<div class="form-group">
<label>Date and time range</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
data-ng-model="newLicense.date" required/>
</div>
<div class="form-group">
<label>Execution number</label><span id="errmsg"
style="float: right; color: red"></span> <input
data-ng-model="newLicense.counter" id="executionNumber" type="number"
class="form-control" placeholder="executionNumber" min="0" required>
</div>
<div class="form-group">
<label>MAC address</label> <input id="macAddress" type="text"
class="form-control" data-ng-model="newLicense.macAddress" maxlength="25"
placeholder="MAC address" required>
</div>
<div class="form-group">
<label>CPU ID</label> <input id="cpuId" type="text"
class="form-control" data-ng-model="newLicense.cpuId" maxlength="25"
placeholder="CPU ID" required>
</div>
</div>
</form>
</div>
<p data-ng-show="users.length == 0">All clients have the own
license, you can update a license with UPDATE button.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-show='users.length > 0' data-ng-disabled="newLicenseForm.$invalid"
data-ng-click="createLicense(newLicense)" id="createLicenseButton"
type="button" class="btn btn-primary">Create license</button>
<button data-ng-show='users.length == 0' id="createLicenseButton"
type="button" class="btn btn-primary" disabled>Create
license</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
In javascript I have this code
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.datePicker.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
I receive exception Cannot set property 'date' of undefined on $scope.datePicker.date = {startDate: null, endDate: null};
row. Has someone used this plugin to store form information?Thanks
Your problem is in data-binding and specifically here:
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" data-ng-model="newLicense.date" required/>
because $scope.newLicense.date is never defined.
To solve this problem, this line of code:
$scope.datePicker.date = {startDate: null, endDate: null};
should be like :
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
also in your ajax post your data should be $scope.newLicense
so your controller should be like:
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : $scope.newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
this is a working demo
Related
I want to submit a form using ajax request which is in a modal window.
The modal is opened by clicking this link:
<a class="btn btn-primary" data-target="#modal-review" data-toggle="modal">
<i class="fa fa-edit"></i> Write a review
</a>
the modal window:
<div class="modal fade" id="modal-review" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button>
<h3 class="modal-title-site text-center">PRODUCT REVIEW </h3>
</div>
<div class="modal-body">
<h3 class="reviewtitle uppercase">Product: {{ $product->Name }}</h3>
<form id="review-form" method="post" action="{{ route('add-review') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="review-name">Name</label>
<input type="text" class="form-control" id="review-name" required>
</div>
<div class="form-group">
<label for="review-email">Email</label>
<input type="text" class="form-control" id="review-email" required>
</div>
<div class="form-group ">
<label for="review-title">Title: (optional)</label>
<input type="text" class="form-control" id="review-title" required>
</div>
<div class="form-group ">
<label for="review-comment">Review</label>
<textarea class="form-control" rows="3" id="review-comment" required></textarea>
</div>
<button type="button" id="send-review" class="btn btn-primary">Send review</button>
<div id="review-response"></div>
</form>
</div>
</div>
</div>
The problem is when i click the send button i get:
jquery-3.3.1.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
at HTMLFormElement.toString (<anonymous>)
What i did wrong or what i forgot to do?
The code for ajax request is:
$('#send-review').on('click', function(e){
e.preventDefault();
var form = $('#review-form');
$.ajax({
url: form.attr('action'),
type: 'POST',
dataType: 'json',
data: {'review-name':$('#review-name').val(), 'review-email':$('#review-email').val(), 'review-title':$('#review-title').val(), 'review-comment':$('#review-comment')},
success: function (response) {
if(!response.error){
console.log(response.msg);
} else {
console.log(response.msg);
}
}
});
});
Your issue is here:
....'review-comment':$('#review-comment')},
Change that to:
.....'review-comment': $('#review-comment').val()
$('#send-review').on('click', function (e) {
e.preventDefault();
var form = $('#review-form');
$.ajax({
url: form.attr('action'),
type: 'POST',
dataType: 'json',
data: {
'review-name': $('#review-name').val(),
'review-email': $('#review-email').val(),
'review-title': $('#review-title').val(),
'review-comment': $('#review-comment').val()
},
success: function (response) {
if (!response.error) {
console.log(response.msg);
} else {
console.log(response.msg);
}
},
error: function(response, textStatus, errorThrown) {
$('#modal-review').modal('hide');
console.log(response);
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="btn btn-primary" data-target="#modal-review" data-toggle="modal">
<i class="fa fa-edit"></i> Write a review
</a>
<div class="modal fade" id="modal-review" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button>
<h3 class="modal-title-site text-center">PRODUCT REVIEW </h3>
</div>
<div class="modal-body">
<h3 class="reviewtitle uppercase">Product: {{ $product->Name }}</h3>
<form id="review-form" method="post" action="{{ route('add-review') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="review-name">Name</label>
<input type="text" class="form-control" id="review-name" required>
</div>
<div class="form-group">
<label for="review-email">Email</label>
<input type="text" class="form-control" id="review-email" required>
</div>
<div class="form-group ">
<label for="review-title">Title: (optional)</label>
<input type="text" class="form-control" id="review-title" required>
</div>
<div class="form-group ">
<label for="review-comment">Review</label>
<textarea class="form-control" rows="3" id="review-comment" required></textarea>
</div>
<button type="button" id="send-review" class="btn btn-primary">Send review</button>
<div id="review-response"></div>
</form>
</div>
</div>
</div>
</div>
using names in form and the old form.serialize() works!
$.ajax({
url: form.attr('action'),
type: 'POST',
data: form.serialize(),
success: function (response) {
if(!response.error){
console.log(response.msg);
} else {
console.log(response.msg);
}
}
});
I am trying to Check weather email exist or not to send reset password link.
For that am using ajax function but its showing 500 internal server error before runing ajax.
I knw 500 is for token miss match error but do i need token to check email existing or not.
But I think so, with the form tag token is auto generated and then also am using {{ csrf_field() }}
But it showing same error 500 Internal server. Just Help how can resolve this issue and do i need to generate token manually.
Views : login.blade.php
{!! Form::open(array('url' => '/auth/login', 'class' => 'form- login')) !!}
<div class="form-title"> <span class="form-title">Login</span> </div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix required" type="text" autocomplete="off" placeholder="Email" name="email" />
</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 passwordclass required" type="password" autocomplete="off" placeholder="Password" name="password" />
</div>
<div class="form-actions">
<button type="submit" class="btn red btn-block uppercase clicklogin" style="background-color:#d5ed31 !important;border-radius:4px !important;border:1px solid #ddd;">Login</button>
</div>
<div class="form-actions">
<div class="pull-left">
<label class="rememberme mt-checkbox mt-checkbox-outline">
<input type="checkbox" name="remember" value="1" />
Remember me <span></span> </label>
</div>
<div class="pull-right forget-password-block"> <a class="btn-link" data-target="#modalforget" data-toggle="modal">Forgot Password? </a></div>
</div>
{!! Form::close() !!}
<!-- END LOGIN FORM -->
<!-- BEGIN FORGOT PASSWORD FORM-->
{!! Form::open(array('url'=>'password/reset','class' => 'form-horizontal create_forget_form','method'=>'POST', 'id' =>'forgetdata', 'files' => true)) !!}
{{ csrf_field() }}
<div class="modal fade" id="modalforget" tabindex="-1" data-width="760px" >
<div class="modal-dialog" style="width:760px !important;">
<div class="modal-content" style="background-color:#26344b;padding:20px;border-radius:12px !important;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<div class="form-title"> <span class="form-title">Forget Password</span> </div>
</div>
<div class="modal-body" style="height:auto !important;">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<strong style="color: #ffffec; font-size: large; "> Please enter your email. A password reset link will be sent to this email.</strong>
</div>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col-md-10">
<div class="form-group">
<div class="col-md-2"></div>
<div class="col-md-10">
<input class="form-control required" type="email" autocomplete="off" placeholder="Email" id="forget_email" name="forget_email"style="font-size: large;" />
<span class="my-error-class" id="email_status"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" value="Submit" id="submitButton" class="btn green">Submit</button>
<button type="button" value="Cancel" class="btn default red" data-dismiss="modal">Cancel</button>
<button type="reset" value="Clear" class="btn blue">Clear</button>
</div>
</div>
</div>
</div>
</div>
</form>
Ajax function in login.blade.php
<script type="text/javascript">
$('#submitButton').click(function(){
var formdata=new FormData($(this)[0]);
$.ajax({
url:"{{ URL::to('password/reset') }}",
type: 'POST',
data: formdata,
async: false,
cache: false,
contentType: false,
processData: false,
context:this,
dataType: "json",
success: function (returndata)
{
if(returndata == 0)
{
$( '#email_status' ).html('This Email does not Exists');
return false;
}
else
{
$( '#email_status' ).html("");
return false;
}
},
error: function(data)
{
console.log(data);
}
});
});
</script>
Route file:
Route::group(['middleware' => 'auth'], function()
{
Route::post('password/reset','Auth\AuthController#resetPassword');
}
Controller Auth\AuthController#resetPassword:
public function resetPassword()
{
$email =Input::get('forget_email');
$user_email = DB::table('users')->where('email', $email)->whereNull('deleted_at')->first();
if($user_email)
{
return '1';
}
else
{
return '0';
}
}
Screen Shot Of Error
I think you have to write your route outside auth group.
Route::post('password/reset','Auth\AuthController#resetPassword');
The issue is you are using POST request with ajax and for every post request you have to pass the csrf-token with the request like:
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
Put this in your ajax code and everything will be fine.
Or if you want to exclude the specific URI from CSRF verification, go to project/app/Http/Middleware, there is a file VerifyCsrfToken.php in which put the routes list in:
protected $except = [
// route list here
];
All the routes defined here excludes from csrf-token check.
A Full calendar Script in one of my project in which i added a Bootstrap modal. I am making it to popup on submit of a Button in my page.But the elements inside the modal are not visible clearly. where am i making the mistake?.
I do have a datepicker in my code, but it is also not displayed with proper 'prev','next' buttons. I have added a sample pic too.Kindly help me..
The following is my code:-
<div class="modal fade in" id="modal_calendar" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add Event </h4>
</div>
<div class="modal-body">
<form id="event_frm" class="form-horizontal">
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventsubject">calendar_eventsubject</label><div class="col-sm-8"><input type="text" name="calendar_eventsubject" value="" id="calendar_eventsubject" placeholder="calendar_eventsubject" data-validation-required-message="Enter the calendar_eventsubject" class="form-control" required="">
</div></div> </div>
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventbody">calendar_eventbody</label><div class="col-sm-8"><textarea name="calendar_eventbody" cols="40" rows="3" id="calendar_eventbody" placeholder="calendar_eventbody" data-validation-required-message="Enter the calendar_eventbody" class="form-control" required=""></textarea>
</div></div>
</div>
<div class="row">
<div class="form-group "><label class="control-label col-sm-3 " for="lbl_disp_code">common_date</label><div class="col-sm-8"><input type="text" name="lbl_disp_code" value="" id="lbl_disp_code" placeholder="common_date" data-validation-required-message="Enter the common_date" class="mts_date form-control" data-format="DD-MM-YYYY" data-single-date-picker="true" data-show-dropdowns="true" required="">
</div></div> <div class="control-label col-sm-3">
<label for="start_date">Start Date</label>
</div>
<div class="col-sm-7">
<input type="text" class="form-control hasDatepicker" id="event_start_date" placeholder="Start Date">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_event">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
customButtons: {
EventButton: {
text:'Add Event',
click:function(event, jsEvent, view){
$('#modal_calendar').modal('show');
}
}
},
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
});
$('#event_start_date').datepicker();
$('#save_event').click(function() {
var subject =$('#calendar_eventsubject').val();
var body =$('#calendar_eventbody').val();
var start_date = $('#event_start_date').val();
if($('#calendar_event_subject').val() =='') {
alert('subject required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#calendar_event_body').val() == '') {
alert('Body required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#event_start_date').val() == '') {
alert('Start Date required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
$.ajax({
cache: false,
type: "POST",
url:"calendar/save_event",
data : {'subject' : subject,'body' : body,'start_date' : start_date},
dataType: 'json',
success: function(result){
if (result!=null){
}
}
});
});
});
</script>
<style>
.datepicker
{
z-index:1151 !important;}
</style>
From this my output is like this:-
In HTML ng-value="itemdetails[0].Title" doesn't update according to the controller update.bt at the same time {{itemdetails[0].Title}} this expression is updated.I cannot understand what is the problem.
HTML
<div id="lineitemmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form>
<div class="form-group">
<label >Title</label>
<input type="text" ng-model="item.Title" class="form-control" ng-value="itemdetails[0].Title" placeholder="Title">
{{itemdetails[0].Title}}
</div>
<div class="form-group">
<label >SKU</label>
<input type="text" ng-model="item.SKU" class="form-control" ng-value="itemdetails[0].SKU" placeholder="SKU">
{{itemdetails[0].SKU}}
</div>
<div class="form-group">
<label >Description</label>
<input type="textarea" ng-model="item.Description" class="form-control" ng-value="itemdetails[0].Description" placeholder="Description">
</div>
<div class="form-group">
<label >Unit type</label>
<input type="text" ng-model="item.UnitType" class="form-control" ng-value="itemdetails[0].UnitType" placeholder="Unit type">
</div>
<div class="form-group">
<label >Unit price</label>
<input type="text" ng-model="item.Unitprice" class="form-control" ng-value="itemdetails[0].Unitprice" placeholder="Unit price">
</div>
<button type="submit" class="btn btn-success" style="margin-right: 75%" ng-click="saveitem(item)" data-dismiss="modal">Save</button>
<button type="submit" class="btn btn-danger" data-dismiss="modal">Delete</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Controller
app.angular.controller('lineItemController', function ($scope, rest, $window) {
$scope.lineitems = [];
$scope.itemdetails = [];
var currentitem;
$scope.addnewitem = function () {
$scope.lineitems.push({Title:'Title',SKU:'SKU',Description:'Description',UnitType:'Unit type',UnitPrice:'Unit price'});
};
$scope.getitems = function () {
rest.get('lineitem').then(function (results) {
$scope.lineitems = [];
$scope.itemdetails = [];
$scope.lineitems = results;
console.log(results);
});
};
$scope.getitems();
$scope.showitem = function (item) {
$scope.itemdetails.push(item);
console.log($scope.itemdetails);
$("#lineitemmodal").modal('show');
};
$scope.saveitem = function (newitem) {
console.log($scope.itemdetails[0]);
//item.ID = $scope.itemdetails.ID;
$scope.itemdetails[0].Title = newitem.Title;
$scope.itemdetails[0].SKU = newitem.SKU;
$scope.itemdetails[0].Description = newitem.Description;
$scope.itemdetails[0].UnitType = newitem.UnitType;
$scope.itemdetails[0].Unitprice = newitem.Unitprice;
rest.post('lineitem', {
LineItem: $scope.itemdetails[0]
}).then(function (results) {
console.log(results);
$scope.getitems();
});
};
});
I have a modal as so
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="page-title">
Add Movie
<small>Note fields marked with <span style="color:red">*</span> are required</small>
</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="NewMovie">
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Title <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Title" name="Title" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Classification <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Classification" name="Classification" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Rating <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input id="Rating" name="Rating" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0" /> <span id="rate" style="margin-left:5%">0 / 5</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Release Date <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="ReleaseDate" name="ReleaseDate" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Cast <span style="color:red">*</span>
</label>
<div class="col-sm-5">
<input type="text" class="form-control col-sm-5" id="Cast" />
</div>
<div class="col-sm-1">
<button type="button" id="btnNewCast" class="btn btn-default">+</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix"></label>
<div class="col-sm-6" id="newCast">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnAddMovie" data-dismiss="modal">Save</button>
</div>
</div>
</div>
When btnAddMovie is clicked I ajax / jquery method is called which calls a method in my controller. But before I submit I would like to validate the fields they have entered.
I am following this Form validation on bootstrap modal
I have declared my implementation as follows:
$(document).ready(function() {
$('#NewMovie').formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Title: {
validators: {
notEmpty: {
message: 'The Title is required'
}
}
}
}
});
});
My ajax method is as follows:
$("#btnAddMovie").click(function () {
var stringArr = $('span[data-id="cast[]"]').map(function () {
return $(this).text().trim();
}).get();
$.ajax({
url: '/Movies/Add',
traditional: true,
data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
cache: false,
type: "POST",
success: function (result) {
if (result.success) {
}
},
error: function (result) {
alert("Error");
}
});
});
But for some reason when ever click the button on my form it automatically posts back without doing the validation?
I'm trying to validate and depending on if its true or false then perform the relevant action.
About your button, either you have to change it to a submit button or use the button setting to indicate which button should trigger the validation (see bellow)
button: {
// The submit buttons selector
selector: '#btnAddMovie'
}
you have to delete data-dismiss="modal" from your button
And then trigger the success.form.fv event and call your ajax method there, see following code:
$('#NewMovie').formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
// ...
icon: {
// ...
},
fields: {
// ...
}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
// And then
// Place your Ajax call here
var stringArr = $('span[data-id="cast[]"]').map(function () {
return $(this).text().trim();
}).get();
$.ajax({
url: '/Movies/Add',
traditional: true,
data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
cache: false,
type: "POST",
success: function (result) {
if (result.success) {
}
},
error: function (result) {
alert("Error");
}
});
// And then close your modal
$('#MyModal').modal('hide');
});
# References:
form events docs: http://formvalidation.io/settings/#event-form
button setting docs: http://formvalidation.io/settings/#form-button
If you remove your ajax call, does the validation work?
Maybe you should take a look at your submit button :
<button type="button" class="btn btn-default" id="btnAddMovie" data-dismiss="modal">Save</button>
which is not a submit button.
If you look to the example in the page you gave us, you can see that the submit button's code is
<button type="submit" class="btn btn-primary">Login</button>
Try to change this and it would be nice if you could provide us a JSFiddle
Hope it's gonna help you a bit.