I'd like to add a datepicker to my code to pick the birth date of user, however, even though I have embed the jquery and jquery-ui, the datepicker is not functioning and showed up...
Here is my code (I am using laravel 5.2)
here is the layout:
<!--
Retrospect by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)-->
<head>
<title>#yield('title')</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="{{asset('assets/css/index.css')}}" />
<script src="{{asset('jquery-ui/external/jquery/jquery.js')}}"></script>
<link rel="stylesheet" href="{{asset('jquery-ui/jquery-ui.css')}}">
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!-- Header -->
<header id="header" class="skel-layers-fixed">
<h1>#yield('header')</h1>
Menu
</header>
<!-- Nav -->
<nav id="nav">
<!-- Authentication Links -->
#if (Auth::guard('web')->guest())
<ul class="links">
<li>Home</li>
<li>assessment</li>
<!-- <li>Kirim Email</li> -->
</ul>
#else
<ul class="links">
<li>Home</li>
<li>assessment</li>
<li>Edit Account</li>
<li>Edit Pasien</li>
<li>Logout</li>
<!-- <li>Kirim Email</li> -->
</ul>
#endif
</nav>
#yield('content')
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon fa-facebook">
<span class="label">Facebook</span>
</a></li>
<li><a href="#" class="icon fa-twitter">
<span class="label">Twitter</span>
</a></li>
<li><a href="#" class="icon fa-instagram">
<span class="label">Instagram</span>
</a></li>
<li><a href="#" class="icon fa-linkedin">
<span class="label">LinkedIn</span>
</a></li>
</ul>
<p>
FAQ | Terms & Conditions
</p>
<ul class="copyright">
<li>© PT. Digital Media Laboratorindo.</li>
<li>Images: Unsplash.</li>
<li>Design: TEMPLATED.</li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="{{asset('assets/js/skel.min.js')}}"></script>
<script src="{{asset('assets/js/util.js')}}"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="{{asset('assets/js/index.js')}}"></script>
and here is my own form...
#extends('master.nonindex')
#section('title')
Halaman Edit Pasien
#endsection
#section('header')
Edit Pasien
#endsection
#section('content')
<script src="{{asset('jquery-ui/jquery-ui.min.js')}}"></script>
<script type="text/javascript">
$(".datepicker1").datepicker({
//home service
dateFormat: 'yy-mm-dd',
altField: '.datepicker1',
altFormat: 'yy-mm-dd',
minDate: '+1d',
maxDate: '+14d'
});
</script>
<!-- Main -->
<section id="main" class="wrapper">
<div class="container">
<!-- Form -->
<section>
#foreach($pasien as $p)
<h3>Edit Pasien {{$p->nama_panggilan}}</h3>
<form method="post" action="{{URL::to('updatePasien')}}">
<input type="hidden" name="nama_panggilan" value="{{$p->nama_panggilan}}">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
Nama depan:
<input type="text" name="nama_depan" id="name" value="{{$p->nama_depan}}" placeholder="Nama Depan" />
</div>
<div class="6u$ 12u$(xsmall)">
Nama belakang:
<input type="text" name="nama_belakang" id="email" value="{{$p->nama_belakang}}" placeholder="Nama Belakang" />
</div>
<div class="12u$">
No. KTP:
<input type="text" name="ktp" value="{{$p->no_ktp}}" placeholder="Nomor KTP Anda">
</div>
<div class="12u$">
Alamat:
<input type="text" name="alamat" value="{{$p->alamat}}" placeholder="Tuliskan Alamat Anda">
</div>
<div class="12u$">
Tanggal lahir:
<input type="text" name="tanggal_lahir" value="{{$p->tanggal_lahir}}" placeholder="Tanggal Lahir" class="datepicker1">
</div>
<div class="12u$">
Agama: <br>
<select name="agama" id="category">
<option value="{{$p -> agama}}">{{$p -> agama}}</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Islam">Islam</option>
<option value="Konghucu">Konghucu</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>
</div>
<div class="12u$">
Jenis Kelamin: <br>
#if($p->jenis_kelamin=='L')
<select name="jenis_kelamin" id="category">
<option value="L" selected>Laki-laki</option>
<option value="P">Perempuan</option>
</select>
#elseif($p->jenis_kelamin=='P')
<select name="jenis_kelamin" id="category">
<option value="L">Laki-laki</option>
<option value="P" selected>Perempuan</option>
</select>
#else
<select name="jenis_kelamin" id="category">
<option value="" selected>Jenis Kelamin Anda</option>
<option value="L">Laki-laki</option>
<option value="P" >Perempuan</option>
</select>
#endif
</div>
<div class="6u 12u$(xsmall)">
TB:
<input type="text" name="tb" id="name" value="{{$p->tb}}" placeholder="TB Anda" />
</div>
<div class="6u$ 12u$(xsmall)">
BB:
<input type="text" name="bb" id="email" value="{{$p->bb}}" placeholder="BB Anda" />
</div>
<div class="12u$">
Golongan Darah: <br>
<select name="goldar" id="category">
<option value="{{$p -> gol_darah}}">{{$p -> gol_darah}}</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="12u$">
Status Perkawinan: <br>
<select name="status_perkawinan" id="category">
<option value="{{$p -> status_perkawinan}}">{{$p -> status_perkawinan}}</option>
<option value="1">Kawin</option>
<option value="2">Belum Kawin</option>
</select>
</div>
<div class="12u$">
Apakah anda mempunyai Alergi?
<input type="text" name="alergi" value="{{$p->alergi}}" placeholder="Apakah anda mempunyai Alergi">
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" value="Update" class="special" /></li>
</ul>
</div>
</div>
</form>
#endforeach
</section>
</div>
</section>
#endsection
Thank you for your help...
UPDATE:
here is the code rayon
#extends('master.nonindex')
#section('title')
Halaman Edit Pasien
#endsection
#section('header')
Edit Pasien
#endsection
#section('content')
<script type="text/javascript">
$(document).ready(function(){
$(".datepicker1").datepicker({
//home service
dateFormat: 'yy-mm-dd',
altField: '.datepicker1',
altFormat: 'yy-mm-dd',
minDate: '+1d',
maxDate: '+14d'
});
});
</script>
<!-- Main -->
<section id="main" class="wrapper">
<div class="container">
<!-- Form -->
<section>
#foreach($pasien as $p)
<h3>Edit Pasien {{$p->nama_panggilan}}</h3>
<form method="post" action="{{URL::to('updatePasien')}}">
<input type="hidden" name="nama_panggilan" value="{{$p->nama_panggilan}}">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
Nama depan:
<input type="text" name="nama_depan" id="name" value="{{$p->nama_depan}}" placeholder="Nama Depan" />
</div>
<div class="6u$ 12u$(xsmall)">
Nama belakang:
<input type="text" name="nama_belakang" id="email" value="{{$p->nama_belakang}}" placeholder="Nama Belakang" />
</div>
<div class="12u$">
No. KTP:
<input type="text" name="ktp" value="{{$p->no_ktp}}" placeholder="Nomor KTP Anda">
</div>
<div class="12u$">
Alamat:
<input type="text" name="alamat" value="{{$p->alamat}}" placeholder="Tuliskan Alamat Anda">
</div>
<div class="12u$">
Tanggal lahir:
<input type="text" name="tanggal_lahir" value="{{$p->tanggal_lahir}}" placeholder="Tanggal Lahir" class="datepicker1">
</div>
<div class="12u$">
Agama: <br>
<select name="agama" id="category">
<option value="{{$p -> agama}}">{{$p -> agama}}</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Islam">Islam</option>
<option value="Konghucu">Konghucu</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>
</div>
<div class="12u$">
Jenis Kelamin: <br>
#if($p->jenis_kelamin=='L')
<select name="jenis_kelamin" id="category">
<option value="L" selected>Laki-laki</option>
<option value="P">Perempuan</option>
</select>
#elseif($p->jenis_kelamin=='P')
<select name="jenis_kelamin" id="category">
<option value="L">Laki-laki</option>
<option value="P" selected>Perempuan</option>
</select>
#else
<select name="jenis_kelamin" id="category">
<option value="" selected>Jenis Kelamin Anda</option>
<option value="L">Laki-laki</option>
<option value="P" >Perempuan</option>
</select>
#endif
</div>
<div class="6u 12u$(xsmall)">
TB:
<input type="text" name="tb" id="name" value="{{$p->tb}}" placeholder="TB Anda" />
</div>
<div class="6u$ 12u$(xsmall)">
BB:
<input type="text" name="bb" id="email" value="{{$p->bb}}" placeholder="BB Anda" />
</div>
<div class="12u$">
Golongan Darah: <br>
<select name="goldar" id="category">
<option value="{{$p -> gol_darah}}">{{$p -> gol_darah}}</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="12u$">
Status Perkawinan: <br>
<select name="status_perkawinan" id="category">
<option value="{{$p -> status_perkawinan}}">{{$p -> status_perkawinan}}</option>
<option value="1">Kawin</option>
<option value="2">Belum Kawin</option>
</select>
</div>
<div class="12u$">
Apakah anda mempunyai Alergi?
<input type="text" name="alergi" value="{{$p->alergi}}" placeholder="Apakah anda mempunyai Alergi">
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" value="Update" class="special" /></li>
</ul>
</div>
</div>
</form>
#endforeach
</section>
</div>
</section>
<script src="{{asset('jquery-ui/jquery-ui.min.js')}}"></script>
#endsection
You might want check your client side errors first on the browser. That will give you a clear picture of "what exactly is wrong?".
Related
I have a requirement where i have to change the color of the row based on the onchange value in a dropdown. I have rows that are in the form of division. There are two main divisions which have rows in the form of division which were earlier two main tables.
Now when i change the value in the combo of a row in first division i want to change the color of the entire division row. Also with that i want to change the color of the row in the second main division as well. I could easily do it with tables but with division i am finding it difficult and also i am not sure about feasibility. Below is my code structure and my JQuery which i used for changing color.
$('#bodyLeft tr').bind('click', function(e) {
var bodyLeftTable = $("#bodyLeft tr").index(this);
var vehicleClassVal = $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").find('.vehicleClass').val();
if (scheduleStatusVal == 'Volvo') {
$("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
$("#bodyRight tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--First Division-->
<div id="bodyLeft">
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
</div>
<!--Second Division -->
<div id="bodyRight">
<div class="divTableRow">
<div class="divTableCell width20">
<input type="text" name="parts">
</div>
<div class="divTableCell width85">
<input type="text" name="ischecked">
</div>
<div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<input type="text" name="parts">
</div>
<div class="divTableCell divWidth">
<input type="text" name="ischecked">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
</div>
So, #bodyLeft tr targets what exactly?
I can's see a tr anywhere in there.
I am assuming you need to bind click to #bodyLeft.vehicleClass?
In your JS code, check every selector and make it match the structure in the HTML.
Or post a relevant code of a table where it should target.
EDIT: I just read text again and noticed you used to use table. Yeah, definitely rewrite your query selectors. Both in JS you posted and in other code and don't forget to check CSS as well while you are at it.
Following could be one of the solution following your approach.
$('#bodyLeft .divTableRow').bind('click', function(e) {
var curRow, curSelect, nextRow, nextSelect;
curRow = $( this );
curSelect = curRow.find('select.vehicleClass');
nextRow = curRow.next();
nextSelect = nextRow.find('select.vehicleClass');
// Following are sample stuff
// replace with your actual stuff
curRow.css('background-color', 'yellow');
curSelect.css('background-color', 'yellow');
nextRow.css('background-color', 'cyan');
nextSelect.css('background-color', 'cyan');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bodyLeft">
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<select class="vehicleClass">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="divTableCell divWidth">
<input type="text" name="address">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="pass">
</div>
</div>
</div>
<!--Second Division -->
<div id="bodyRight">
<div class="divTableRow">
<div class="divTableCell width20">
<input type="text" name="parts">
</div>
<div class="divTableCell width85">
<input type="text" name="ischecked">
</div>
<div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
<div class="divTableRow">
<div class="divTableCell divWidth">
<input type="text" name="parts">
</div>
<div class="divTableCell divWidth">
<input type="text" name="ischecked">
</div>
<div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
<input type="text" name="validity">
</div>
</div>
</div>
I have got the problem when i am trying to use two selectpicker but in different tab like the code below
$(document).ready(function(){
$('.selectpicker').selectpicker({
style: 'btn-default'
});
})
$('#test').click(function(){
var test = $('#okay').serialize();
alert(test);
console.log(test);
})
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form id="okay">
<input class="form-control" type="text" name="1">
<select class="selectpicker form-control" name="okse" id="okse">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<input class="form-control" type="text" name="4">
</div>
<div id="menu1" class="tab-pane fade">
<input class="form-control" type="text" name="6">
<input class="form-control" type="text" name="7">
<input class="form-control" type="text" name="8">
<select class="selectpicker form-control" name="okse1" id="okse1">
<option value="Matt">matt</option>
<option value="Dessy">Dess</option>
</select>
</form>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
<hr>
<br>
<button id="test">Click me</button>
</body>
</html>
The result i got is
1=&okse=2010&4=&6=&7=&8=
the id okse1 didnt include in jquery serialized. WHat i expect was like below:
1=&okse=2010&4=&6=&7=&8=&okse1=matt
or i got an empty result but the id okse1 got serialized
1=&okse=2010&4=&6=&7=&8=&okse1=
As you could see above snippet, the selectpicker with id okse1 didnt serialized when i clicked button#test. if the selectpicker was in different tab, it didint serialized. How do i fix this ?
Fix your HTML markup as in suggestion. Form is closed before second tab's div. Opened in the first one. Here's fixed fiddle: https://jsfiddle.net/hkxewpbn/
<form id="okay">
<div id="home" class="tab-pane fade in active">
<input class="form-control" type="text" name="1">
<select class="selectpicker form-control" name="okse" id="okse">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<input class="form-control" type="text" name="4">
</div>
<div id="menu1" class="tab-pane fade">
<input class="form-control" type="text" name="6">
<input class="form-control" type="text" name="7">
<input class="form-control" type="text" name="8">
<select class="selectpicker form-control" name="okse1" id="okse1">
<option value="Matt">matt</option>
<option value="Dessy">Dess</option>
</select>
I'm trying to loop over form fields and get the value.
What i'm expecting is "key=primary_account_id&value=123&key=primary_account_first_name&value=rose&key=primary_account_last_name&value=kent" and what I am getting from below code is "key=primary_account_id&value=123" thrice. Please let me know what am I missing. Thanks.
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_id" data-type="text">ID</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="123">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_first_name" data-type="text">Primary First Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="rose">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_last_name" data-type="text">Last Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="kent">
</div>
</div>
<script>
$('.search-field-form').each(function(){
console.log("key=" + $('.searchField').val() + "&value=" + $('.searchField').closest('.search-field-form').find('.search-text').find('input[name="search-value"]').val());
</script>
If you have a form, do below -
HTML
<form id="search-form">
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_id" data-type="text">ID</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="123">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_first_name" data-type="text">Primary First Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="rose">
</div>
</div>
<div class="search-field-form">
<div class="custom-dd">
<select class="searchField" name="search-field">
<option value="primary_account_last_name" data-type="text">Last Name</option>
</select>
</div>
<div class="answer search-text hide">
<input type="text" name="search-value" value="kent">
</div>
</div>
<button type="button" id="submit-btn">Submit</button>
</form>
JS
<script>
$(function() {
$('#submit-btn').click(function() {
data = $('#search-form').serialize();
data = data.replace(/search-field/g, 'key');
data = data.replace(/search-value/g, 'value');
console.log(data);
});
});
</script>
If you don't have a form, follow Hairmot's answer.
Change $('.searchField') to $(this).find('.searchField')
I was testing a website's security and in an attempt to exploit its XSS, I used <script> tag. However, this website has a word limit on the input, so my ending script tag was not inserted in the database. Now when I open the webpage the submit button no longer appear because it was inside the truncated script tag. Due to Chrome's auto-correction, that specific script tag gets closed after submit button tag. Are anyone able to help me out?
After auto-correction, the HTML code of the page looks like this.
<!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>Update Student Information</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../login/css/style_reg.css" type="text/css" />
<link rel="stylesheet" href="../login/js/jquery-smoothness-ui.css">
<script src="../login/js/jquery-2.0.3.js"></script>
<script src="../login/js/jquery-ui.js"></script>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("same_info");
c.onchange=toggle_shipping_visibility;
}
function toggle_shipping_visibility()
{
var c=document.getElementById("same_info");
var t=document.getElementById("shipping_table");
t.style.display=(c.checked) ? 'none' : '';
}
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form class="form2" action="sem-reg.php" method="POST">
<div class="formtitle">Update Student Information</div>
<div class="note">
»» All Fields are Compulsory
<h3 style="margin-left:20px;color:green;">Welcome ADARSH I can still edit it</h3>
<h3 style="margin-left:20px;color:green;">1403097</h3>
</div>
<div class="input">
<div class="inputtext">University Roll:</div>
<div class="inputcontent">
<input type="text" name="univ" placeholder="University Roll No" value="1403097"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">College Roll:</div>
<div class="inputcontent">
<input type="text" name="coll" placeholder="College Roll No" value="1006/14"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Name:</div>
<div class="inputcontent">
<input type="text" name="name" placeholder="Name" value="ADARSH I can still edit it"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Father's Name:</div>
<div class="inputcontent">
<input type="text" name="father" placeholder="Father's Name" value="PAWAN KUMAR" readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Mother's Name:</div>
<div class="inputcontent">
<input type="text" name="mother" placeholder="Mother's Name" value="SH. MT. BABLI DEVI"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Batch</div>
<div class="inputcontent" readonly>
<select name="batch" >
<option disabled="disabled" value="2011">2011</option>
<option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Semester</div>
<div class="inputcontent">
<select name="sem" >
<option value="4">4</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Branch</div>
<div class="inputcontent" >
<select name="bra">
<option value="3">B.Tech - Computer Science Engineering</option>
<option value="1">B.Tech - Biotechnology Engineering</option><option value="2">B.Tech - Chemical Engineering</option><option value="3">B.Tech - Computer Science Engineering</option><option value="4">B.Tech - Electronics & Communications Engineering</option><option value="5">B.Tech - Information Technology</option><option value="6">B.Tech - Mechanical Engineering</option><option value="10">M.Tech Part Time Thermal Engineering</option><option value="11">M.Tech Part Time Computer Science Engineering</option><option value="12">M.Tech Part Time Electronics & Communications Engineering</option><option value="13">M.Tech Part Time Chemical Engineering</option><option value="14">M.Tech Part Time Production Engineering</option><option value="15">M.Sc Physics</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Practical Group</div>
<div class="inputcontent">
<select name="prac">
<option value="2">B1</option>
<option value="1">None</option><option value="2">B1</option><option value="3">B2</option><option value="4">B3</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">D.O.B</div>
<div class="inputcontent">
<input id="datepicker" type="text" name="dob" placeholder="D.O.B." value="24/04/1997"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Section</div>
<div class="inputcontent">
<select name="sec">
<option value="1">A</option>
<option value="0">None</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
<div class="input">
<div class="inputtext">Category</div>
<div class="inputcontent">
<select name="cat" readonly>
<option value="General">General</option>
<option value="General">General</option><option value="Scheduled Castes/ Scheduled Tribes">Scheduled Castes/ Scheduled Tribes</option><option value="Backward Classes">Backward Classes</option><option value="Border Areas">Border Areas</option><option value="Backward Areas">Backward Areas</option><option value="Sports Persons">Sports Persons</option><option value="Children/ Grand Children of Freedom Fighters/Political Sufferers">Children/ Grand Children of Freedom Fighters/Political Sufferers</option><option value="Disabled Persons">Disabled Persons</option><option value="Children/Widow Of Defence Personnel/ Ex-Servicemen etc">Children/Widow Of Defence Personnel/ Ex-Servicemen etc</option><option value="Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards">Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards</option><option value="Riot Affected/ Terrorist affected families">Riot Affected/ Terrorist affected families</option><option value="Tsunami victims">Tsunami victims</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Parents):</div>
<div class="inputcontent">
<input type="text" name="phone_parent" placeholder="Phone no(Parents)" value="+919459578556"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Self): </div>
<div class="inputcontent">
<input type="text" name="phone_self" placeholder="Phone No(Self)" value="+919814615325"readonly/>
</div>
</div>
<div class="add">Permanent Address:</div>
<div class="input" style="height:120px">
<div class="inputtext">Address: </div>
<div class="inputcontent">
<textarea class="textarea" name="address" placeholder="Address" ></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea>
</div>
</div>
<div class="input">
<div class="inputtext">City: </div>
<div class="inputcontent">
<input type="text" name="city" placeholder="City" value="Dhar"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">State: </div>
<div class="inputcontent">
<input type="text" name="state" placeholder="State" value="Himachal"readonly/>
</div>
</div>
<input type="checkbox" name="same_info" id="same_info" checked="checked">Correspondence Address is same as Permanent Address<br>
<table id="shipping_table" style="display:none">
<tr class="inputtext">
<td>Address</td>
</tr>
<tr>
<td><textarea class="textarea" name="c_address"placeholder="Address"></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea></td>
</tr>
<tr class="inputtext">
<td>City</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_city" placeholder="City" value="Dhar"></td>
</tr>
<tr class="inputtext">
<td>State</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_state" placeholder="State" value="Himachal"></td>
</tr>
</table>
<div class="buttons">
«« Go Back To Home Page
<input class="orangebutton" type="submit" name="submit" value="Update" />
</div>
</form>
</div>
</body>
</html>
Using Chrome you can right-click on the last visible element, or somewhere else on the page, select Inspect and then edit the HTML that is loaded in the browser using the Chrome built in developer tools. E.g. remove/alter the <script> tag. And see if the page becomes usable again.
You can also try a recent version of Firefox or MSIE, they have features very similar to the above.
I am currently working on a project and having quite a difficult time with this plugin I managed to get it to work without custom errors one problem I ran across was if I have required tags on all elements email doesn't work but when I have it on just the email input it works. When I attempt to run the custom validation I get no errors upon hitting the submit button.
$(document).ready(function () {
$(".form-horizontal").validate( {
rules: {
name: "required", social: "required", postal: {
required: true, postal: true
}
,
phone: {
required: true, phone: true
}
,
email: {
required: true, email: true
}
}
,
messages: {
radio: "Please select a gender.", option: "Please select a province."
}
}
);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lab 5 Part B</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="inputName" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="inputSocial" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="inputPostal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" input="inputPhone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" input="inputEmail">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>
In your validation rules, you need to use the input element's name, but in your case that is not matching
You have name="inputName" in the element but in rules you are using name
$(document).ready(function() {
$(".form-horizontal").validate({
rules: {
name: "required",
social: "required",
postal: {
required: true,
postal: true
},
phone: {
required: true,
phone: true
},
email: {
required: true,
email: true
}
},
messages: {
radio: "Please select a gender.",
option: "Please select a province."
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="name" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="social" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="postal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" name="phone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" name="email">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>