remove shifting of inputs on success validation in HTML - html

I want to be all in one line (has-error and has-success)
Now, situation is like this:
I am using BootstrapValidator and Bootstrap.
Here is my HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric#4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>
Basically, I want to be all aligned, just on has-success to disappear error div below?
I was looking in bootstrap.min.css but it seems it is all OK.
Also in a bootstrapValidator.css I have some classes that not influence on this matter.


i think you should separate to two divs the form, in the first div all the form divs , Apart from the last div
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
and in the second form you need to put this-
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
this way the message will appear in different div
search divA, divB:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="divA">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
</div>
<div class="divB">
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric#4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>

Related

Is it possible to use the jquery validator in TinyMCE?

I'm trying to use jQuery no validator in a form that has a textarea using TinyMCE and I can't leave it as required.
I found some examples to make this requirement, but everyone I add ends up removing TinyMCE from my textarea.
Can anyone can help me? all examples are always giving error.
This is my code:
#model Contato
#{
ViewData["Title"] = "Contato nos";
Layout = "~/Views/Shared/_Layout.cshtml";
var end = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14635.842857905212!2d-47.446606835918516!3d-23.49792447583607!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cf61e82bba04e5%3A0xec1214319ddea74d!2sMarcenaria%20MF!5e0!3m2!1spt-BR!2sbr!4v1620093541821!5m2!1spt-BR!2sbr";
}
<!-- ======= Breadcrumbs ======= -->
<section id="breadcrumbs" class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Contato</h2>
<ol>
<li><a asp-controller="Home" asp-action="Index">Marcenaria MF</a></li>
<li>Contato</li>
</ol>
</div>
</div>
</section><!-- End Breadcrumbs -->
<!-- ======= Contact Section ======= -->
<div class="map-section">
<iframe style="border:0; width: 100%; height: 350px;" src=#end frameborder="0" allowfullscreen></iframe>
</div>
<section id="contact" class="contact">
<div class="container">
<div class="row justify-content-center" data-aos="fade-up">
<div class="col-lg-10">
<div class="info-wrap">
<div class="row">
<div class="col-lg-4 info">
<i class="bi bi-geo-alt"></i>
<h4>Endereço:</h4>
<p> R. Yashica, N° 350 - Jardim Bela Vista,<br>Sorocaba - SP, 18016-440</p>
</div>
<div class="col-lg-4 info mt-4 mt-lg-0">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>info#example.com<br>contact#example.com</p>
</div>
<div class="col-lg-4 info mt-4 mt-lg-0">
<i class="bi bi-phone"></i>
<h4>Telefones:</h4>
<p>(15) 99756-6839<br>(15) 99761-6833</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5 justify-content-center" data-aos="fade-up">
<div class="col-lg-10">
<form id="form_contato" asp-controller="Contatos" asp-action="Contato" method="post" role="form" class="php-email-form" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="Nome" class="form-control" asp-for="Nome" placeholder="Seu Nome">
<span asp-validation-for="Nome" class="text-danger"></span>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="Email" asp-for="Email" placeholder="Seu Email">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="Assunto" asp-for="Assunto" placeholder="Assunto">
<span asp-validation-for="Assunto" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="Mensagem" rows="5" asp-for="Mensagem" placeholder="Mensagem"></textarea>
<span asp-validation-for="Mensagem" class="text-danger"></span>
</div>
<div class="my-3">
<div class="loading" id="loading">Loading</div>
<div class="error-message" id="error-message"></div>
<div class="sent-message" id="sent-message">Sua mensagem foi enviada. Obrigado!</div>
</div>
<div class="text-center"><button type="submit">Enviar Mensagem</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<script src="~/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="~/tinymce/langs/pt_BR.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script>
$(document).ready(function () {
tinymce.init({
selector: 'textarea',
height: 250,
menubar: false,
plugins: 'link, autolink link, textcolor, paste',
toolbar: false,
content_css: '//www.tiny.cloud/css/codepen.min.css',
language: 'pt_BR',
paste_remove_styles_if_webkit: false,
paste_block_drop: false,
paste_data_images: false,
paste_as_text: true,
paste_enable_default_filters: false,
paste_webkit_styles: "none",
browser_spellcheck: true,
contextmenu: true,
branding: false,
statusbar: false,
setup: function (ed) {
//On change call
ed.on('change', function (e) {
//Validate tinyMCE on text change
tinyMCE.triggerSave();
$("#" + ed.id).valid();
}
);
},
});
$(function () {
$.validator.setDefaults({
submitHandler: function () {
$('#loading').addClass('d-block');
}
});
var content = tinyMCE.get("Mensagem");
tinyMCE.triggerSave();
//initialize validatoe
var validator = $("#form_contato").submit(function () {
// update underlying textarea before submit validation
alert($("#Mensagem").val());
}).validate({
ignore: ".ignore",
rules:
{
Email: {
required: true,
email: true,
},
Nome: {
required: true,
},
Assunto: {
required: true
},
Mensagem: {
required: true,
},
},
errorPlacement: function (label, element) {
// position error label after generated textarea
if (element.is("textarea")) {
label.insertAfter(element.next());
} else {
label.insertAfter(element)
}
}
});
validator.focusInvalid = function () {
// put focus on tinymce on submit validation
if (this.settings.focusInvalid) {
try {
var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
if (toFocus.is("textarea")) {
tinyMCE.get(toFocus.attr("#Mensagem")).focus();
} else {
toFocus.filter(":visible").focus();
}
} catch (e) {
// ignore IE throwing errors when focusing hidden elements
}
}
}
})
});
</script>
#if (ViewData["MSG"] != null)
{
<script>
alert(#ViewData["MSG"].ToString());
</script>
}
I really appreciate your help guys

Form Validation.io not working on standard html & css project

I have started a new blank HTML, CSS and Bootstrap project in VS code and I have added FormValidation.io but for some reason its not evening firing up and all I have done is taken their main example, does anybody have an idea why, does this need to be apart of a framework (react, vue) or am I just missing something ? but when I click the submit button nothing happens
<html>
<head>
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/plugins/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-6">
<form id="loginForm" method="POST">
<div class="form-group">
<label>Username</label>
<input class="form-control" type="text" name="username" />
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" name="password" />
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script src="/plugins/jquery.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/plugins/formvalidation/dist/js/FormValidation.full.min.js"></script>
<script src="/plugins/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('loginForm'),
{
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long',
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore',
},
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
stringLength: {
min: 8,
message: 'The password must have at least 8 characters',
},
}
},
},
plugins: {
bootstrap: new FormValidation.plugins.Bootstrap(),
},
}
);
});
</script>
</body>

Bootstrap HTML form only sending last data entry

My form somehow only seems to send the last data entry (user_feel).
It's my first time working with forms and I can't figure out why the other entries aren't sent with the rest of the form:
<!DOCTYPE html>
<head>
<title>How was your day? (So far)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2 py-5">
<h1>Activity form</h1>
<p class="lead">Please indicate what you've eaten and which social activities (if any) you've participated in.</p>
<form id="activity-form" method="post" action="form.php">
<div class="messages"></div>
<div class="controls">
<br />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">What is your name? *</label>
<input id="name" type="text" name="user_name" class="form-control" placeholder="Please enter your name *" required="required" data-error="Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="time">Which part of the day are you reporting on? *</label>
<select id="time" name="current_time" class="form-control" required="required" data-error="Please specify the time of day.">
<option value="">Select the time of day</option>
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="feel">How do you feel? *</label>
<p>Level three is the base level. It's where you don't feel especially good or bad, and consider yourself feeling 'neutral' compared to how you usually feel.</p>
<select id="feel" name="user_feel" class="form-control" required="required" data-error="Please specify how you feel.">
<option value="">Select how you feel</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>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Save data">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted">
<strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
<script src="form.js"></script>
</body>
</html>
I serialize the form and send it using ajax, the php script echo's out all key:value pairs it gained form the post. This is where i only get the user_feel selection, all other selections from the form seem to be ignored.
This is the JS file:
$(function () {
// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator
$('#activity-form').validator();
// when the form is submitted
$('#activity-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "form.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#activity-form').find('.messages').html(alertBox);
// empty the form
$('#activity-form')[0].reset();
}
}
});
return false;
}
})
});
And this is the PHP script:
<?php
$okMessage = 'Your data has been submitted succesfully! Thanks a bunch!';
$errorMessage = 'There was an error while submitting the form. Please try again later';
error_reporting(E_ALL & ~E_NOTICE);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
foreach ($_POST as $key => $value) {
$debug = "";
$debug .= "$key: $value\n";
}
$responseArray = array('type' => 'success', 'message' => $okMessage."\r\n".$debug);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}
It's based on the code from: https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

how can I fix my inputs which are out of range?

I wanted to fix my html/bootstrap style,but at the moment when I clicked the event all my imputs are out of range as picture number 1 at the moment when I get some input wrong . however I want to fix my inputs and when I click my event and get error from jquery stay on the same place as the picture 2
html
<form id="new_product">
<div class="form-group">
<label for="description">Name: </label>
<input type="text" class="form-control" id="description" name="description" title="product description" required>
</div>
<div class="form-group form-inline">
<div class="form-group">
<div class="col-md-5">
<label for="cost_price">Cost Price: </label>
<input type="text" class="form-control" id="cost_price" name="cost_price" title="cost_price" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="selling_price">Selling price: </label>
<input type="text" class="form-control" id="selling_price" name="selling_price" title="selling_price" required>
</div>
</div>
</div>
<div class="form-group form-inline">
<div class="form-group">
<div class="col-md-5">
<label for="wprice">Wholeprice: </label>
<input type="text" class="form-control" id="wprice" name="wprice" title="wprice" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="min_stock">Min stock: </label>
<input type="text" class="form-control" id="min_stock" name="min_stock" title="min_stock" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="stock">Stock: </label>
<input type="text" class="form-control" id="stock" name="stock" title="stock" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="max_stock">Max stock: </label>
<input type="text" class="form-control" id="max_stock" name="max_stock" title="max_stock" required>
</div>
</div>
</div>
</form>
form_view
form_view2
jquery validation
$('#add').on('click',function(){
$("#description").mask("(999) 999-9999");
$("#new_product").validate();
BootstrapDialog.show({
type: BootstrapDialog.TYPE_PRIMARY,
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': URL_GET_VIEW_PRODUCT
},
closable: false,
buttons:[{
id: 'btn-ok',
cssClass: 'btn-primary',
icon: 'glyphicon glyphicon-send',
label: ' Save',
action: function (e) {
var description = $('#description').val();
var cost_price = $('#cost_price').val();
var selling_price = $('#selling_price').val();
var wprice = $('#wprice').val();
var min_stock = $('#min_stock').val();
var stock = $('#stock').val();
var max_stock = $('#max_stock').val();
if($("#new_product").valid()){
$.ajax({
url: URL_GET_ADD_PRODUCT,
type: 'POST',
data: {description: description, cost_price: cost_price, selling_price: selling_price, wprice: wprice, min_stock: min_stock, stock: stock, max_stock: max_stock}
}).done(function (data) {
console.log(data);
if (data.msg == 'successfully added') {
$('#new_product')[0].reset();
table.ajax.reload();
}else if(data.min_stock == 'el stock no puede ser mayor al min'){
BootstrapDialog.show({
type: BootstrapDialog.TYPE_WARNING,
message: 'el stock no puede ser mayor al min'
});
}
});
return false;
}
}
},{
id: 'btn-cancel',
cssClass: 'btn-danger',
icon: 'glyphicon glyphicon-remove',
label: ' Cancel',
action: function (e) {
e.close();
}
}]
});
});

Weird rendering issue

I am facing a weird problem on some of the pages on my website. I get this screen for sometime and the issue gets resolved by itself after sometimes. Any idea what might be causing the issue.
Screenshot as seen on Chrome:
Here is the response header for the request:
Request URL:http://www.badmintonbuddy.com/Create
Request Method:GET
Status Code:500 Internal Server Error
Request Headers
Accept:application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:__utmz=14266660.1293156873.1.1.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=badmintonbuddy; __utma=14266660.1914068399.1293156873.1296024615.1296061789.13; __utmc=14266660; __utmb=14266660.7.10.1296061789
Host:www.badmintonbuddy.com
Referer:http://www.badmintonbuddy.com/Create
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.237 Safari/534.10
Response Headers
Cache-Control:private
Content-Length:1194
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Jan 2011 17:30:52 GMT
Server:Microsoft-IIS/7.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
and here is the HTML of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Submit a Club
</title>
<meta name="description" content="Badminton, Badminton Clubs, Play Badminton, Badminton courts " />
<meta name="keywords" content="Badminton, Badminton Clubs, Play Badminton, Badminton courts" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
<!-- For LOCAL>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAATcytSR8mvGpZGALaUc8OOhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQElXY6qUXmKmYpeVwhVtW50LGAQQ"></script-->
<!--For PROD-->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAATcytSR8mvGpZGALaUc8OOhSZOUWVEB7juxYWb997FACJmh8mbhSnemR4drJ-L8ZQftUNHVhtn9Ph4g"></script>
<!-- jQuery UI Components-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/humanity/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- jQuery UI Components-->
</head>
<body>
<div class="wrapper">
<div class="page">
<div id="header">
<div id="menucontainer">
<a href="/">
<img class="logo" src="../../Content/logo.jpg" alt="BadmintonBuddy"/>
</a>
<ul id="menu">
<li>Home</li>
<li>Submit a Club</li>
<li>Feedback</li>
<li>About</li>
</ul>
</div>
</div>
<div id="main">
<script src="../../Scripts/Map.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
addWatermark();
$('input:submit, input:button').button();
$('a #locate').click(function() {
loadLocation();
});
$('#Country').autocomplete({
source: "GetCountry",
minLength: 0
});
$('#State').autocomplete({
source: function(request, response) {
$.ajax({
url: "GetState",
dataType: "json",
data: {
term: request.term,
country: $('#Country').val()
},
success: function(data) {
response(data);
}
});
},
minLength: 2
});
$('#City').autocomplete({
source: function(request, response) {
$.ajax({
url: "GetCity",
dataType: "json",
data: {
term: request.term,
state: $('#State').val()
},
success: function(data) {
response(data);
}
});
},
minLength: 2
});
$('#optional').accordion({
collapsible: true,
animated: 'bounceslide',
active: false
});
$('.mapoptions').dialog({
autoOpen: false,
show: 'blind',
width: 600,
height: 500,
resizable: false,
title: "Preview Club Location",
buttons: { "Cancel": function() { $(this).dialog("close"); }, "Add": function(event, ui) { fillAddress(); $(this).dialog("close"); } }
});
$('#preview').click(function() {
loadLocation();
return false;
});
$('#submit').click(function() {
//watermark puts all the fields with some text
//hence MVC validation would not work,
//check mandatory fields and then submit if everything is good.
if (rgbToHex($('#ClubName').css('color')) == '#aaaaaa') {
$('#ClubName_validationMessage').html("Please enter Club Name").css('color', 'red'); ;
$('#ClubName_validationMessage').show();
return false;
}
else if (rgbToHex($('#Address').css('color')) == '#aaaaaa') {
$('#Address_validationMessage').html("Please enter Address for the Club").css('color', 'red'); ;
$('#Address_validationMessage').show();
return false;
}
$('input:text').each(function() {
if (rgbToHex($(this).css('color')) == '#aaaaaa') {
$(this).val("");
}
});
$('textarea').each(function() {
if (rgbToHex($(this).css('color')) == '#aaaaaa') {
$(this).val("");
}
});
$('#ClubName_validationMessage').hide();
$('#Address_validationMessage').hide();
return true;
});
});
</script>
<div id="submitdiv">
<div id="clubform">
<form action="/create" id="form0" method="post">
<div class="editor-label">
<b class="req">*</b><label for="Club Name">Club Name</label>
</div>
<div class="editor-field">
<input class="padding5" id="ClubName" name="ClubName" size="50" type="text" value="" />
<span class="field-validation-valid" id="ClubName_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Country">Country</label>
</div>
<div class="editor-field">
<input class="padding5" id="Country" name="City.State.Country.CountryName" size="50" type="text" value="" />
<span class="field-validation-valid" id="City_State_Country_CountryName_validationMessage"></span>
</div>
<div class="editor-label">
<label for="State">State</label>
</div>
<div class="editor-field">
<input class="padding5" id="State" name="City.State.StateName" size="50" type="text" value="" />
<span class="field-validation-valid" id="City_State_StateName_validationMessage"></span>
</div>
<div class="editor-label">
<label for="City">City</label>
</div>
<div class="editor-field">
<input class="padding5" id="City" name="City.CityName" size="50" type="text" value="" />
<span class="field-validation-valid" id="City_CityName_validationMessage"></span>
</div>
<div class="editor-label">
<b class="req">*</b><label for="Address">Address</label>
</div>
<div class="editor-field">
<input class="padding5" id="Address" name="Address" size="50" type="text" value="" />
<span class="field-validation-valid" id="Address_validationMessage"></span>
<div id="locatemap">
<a href="javascript:loadLocation();"><img src="../../Content/map_icon.jpg" alt="Locate on map" height="40px" width="40px"/>
<p>Locate on Map</p></a>
</div>
</div>
<div class="editor-label">
<label for="Number of Courts">Number of Courts</label>
</div>
<div class="editor-field">
<input class="padding5" id="City" name="Courts" size="50" type="text" value="" />
<span class="field-validation-valid" id="Courts_validationMessage"></span>
</div>
<div class="editor-label">
<label for="CourtSurface">CourtSurface</label>
</div>
<div class="editor-field">
<select name="Surface">
<option value="1">Wooden</option>
<option value="2">Syntetic</option>
<option value="3">Cement</option>
<option value="4">Cement with Mat</option>
<option value="5">Others</option>
</select>
<label id="lblSurface">Please Specify</label>
<input display="none" id="Others" name="Others" type="text" value="" />
</div>
<div class="editor-label">
<label for="Website">Website</label>
</div>
<div class="editor-field">
<input class="padding5" id="Website" name="Website" size="50" type="text" value="" />
<span class="field-validation-valid" id="Website_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Email">Email</label><label for="(">(</label> Why?<label for=")">)</label>
</div>
<div class="editor-field">
<input class="padding5" id="Email" name="Email" size="50" type="text" value="" />
<span class="field-validation-valid" id="Email_validationMessage"></span>
</div>
<input id="Owner" name="Owner" type="checkbox" value="true" /><input name="Owner" type="hidden" value="false" />I am the owner of the club.
<!--All optional would go in this collapsable UI-->
<div id="optional">
<h3>Add more details</h3>
<div id="optionalfields">
<div class="editor-label">
<label for="PhoneNumber">PhoneNumber</label>
</div>
<div class="editor-field">
<input class="padding5" id="PhoneNumber" name="PhoneNumber" size="50" type="text" value="" />
<span class="field-validation-valid" id="PhoneNumber_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Fees">Fees</label>
</div>
<div class="editor-field">
<input class="padding5" id="Fees" name="Fees" size="50" type="text" value="" />
<span class="field-validation-valid" id="Fees_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Timings">Timings</label>
</div>
<div class="editor-field">
<input class="padding5" id="Timings" name="Timings" size="50" type="text" value="" />
<span class="field-validation-valid" id="Timings_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Description">Description</label>
</div>
<div class="editor-field">
<textarea cols="40" id="Description" name="Description" rows="5">
</textarea>
<span class="field-validation-valid" id="Description_validationMessage"></span>
</div>
</div>
</div>
<!--End of optional collapsable fields-->
<div id="captcha">
<div class="editor-label padding5 detailshead">
<label>Security Check:</label>
<label>Type both words seperated by space below</label>
</div>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'red',
tabindex : 0
};
</script><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfDnr8SAAAAAAj6KZ0E99d_-vtwgUiOxByyzV1x">
</script><noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfDnr8SAAAAAAj6KZ0E99d_-vtwgUiOxByyzV1x" width="500" height="300" frameborder="0">
</iframe><br /><textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript>
<div id="captchaerror" class="error">Sorry! Those aren't the correct words. Please verify again.</div>
</div>
<p>
<input type="button" id="preview" value="Preview it on Map"/>
<input type="button" id="create" value="Submit" onclick="javascript:validateCaptcha('form0');"/>
<input type="button" value="Clear" onclick="this.form.reset()" />
</p>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"ClubName","ReplaceValidationMessageContents":true,"ValidationMessageId":"ClubName_validationMessage","ValidationRules":[]},{"FieldName":"City.State.Country.CountryName","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_State_Country_CountryName_validationMessage","ValidationRules":[]},{"FieldName":"City.State.StateName","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_State_StateName_validationMessage","ValidationRules":[]},{"FieldName":"City.CityName","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_CityName_validationMessage","ValidationRules":[]},{"FieldName":"Address","ReplaceValidationMessageContents":true,"ValidationMessageId":"Address_validationMessage","ValidationRules":[]},{"FieldName":"Courts","ReplaceValidationMessageContents":true,"ValidationMessageId":"Courts_validationMessage","ValidationRules":[{"ErrorMessage":"The field Courts must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Website","ReplaceValidationMessageContents":true,"ValidationMessageId":"Website_validationMessage","ValidationRules":[]},{"FieldName":"Email","ReplaceValidationMessageContents":true,"ValidationMessageId":"Email_validationMessage","ValidationRules":[]},{"FieldName":"PhoneNumber","ReplaceValidationMessageContents":true,"ValidationMessageId":"PhoneNumber_validationMessage","ValidationRules":[]},{"FieldName":"Fees","ReplaceValidationMessageContents":true,"ValidationMessageId":"Fees_validationMessage","ValidationRules":[]},{"FieldName":"Timings","ReplaceValidationMessageContents":true,"ValidationMessageId":"Timings_validationMessage","ValidationRules":[]},{"FieldName":"Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"Description_validationMessage","ValidationRules":[]}],"FormId":"form0","ReplaceValidationSummary":false});
//]]>
</script>
</div>
<div class="mapoptions">
<p><b>Move marker(<img alt="marker" src="http://www.google.com/mapfiles/marker.png" height="15" width="15" />)on the map to change the location.Click Add once done.</b></p>
<div id="mapDiv" style="height:350px">
</div>
</div>
</div>
</div>
<div id="footer">
<!-- Custom for Project -->
<script src="../../Scripts/Map.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript" src="../../Scripts/Captcha.js"></script>
<script src="../../Scripts/Main.js" type="text/javascript"></script>
<!-- Custom for Project -->
</div>
</div>
</div>
</body>
</html>

Hey, this is my output in Net tab of Firebug:-
HTTP/1.1 500 Internal Server Error
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 27 Jan 2011 03:58:42 GMT
Content-Length: 1194
It's pointing to a 500 Internal server error, can you check it.