I have a dynamic dropdown but the city options don't behave like they should. When I select a state and then a city, the validation doesn't work for the city. The fields are supposed to become red when they don't validate and become whie again when they validate but the city dropdown doesn't become white again after it is red. If you try and press the submit button once then you will get the validation message, and then select a state and a city, then city won't validate even though it is selected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Insert ad</title>
<link href="http://qlbusiness.com/static/css/generic_in.css?newsvgindia?0.63862033593" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"
type="text/css">
<script type="text/javascript" src="https://newinsert-dot-montaoproject.appspot.com/static/js/common.js?0.638620133593"></script>
<script type="text/javascript" src="http://qlbusiness.com/static/js/newad_dhtml.js?0.63862033593"></script>
<script type="text/javascript" src="http://qlbusiness.com/static/js/ufo.js?0.63862033593"></script>
<script type="text/javascript" src="http://qlbusiness.com/static/js/category_dropdown.js?0.63862033593"></script>
<script type="text/javascript" src="http://qlbusiness.com/static/js/events.js?0.63862033593"></script>
<script type="text/javascript" src="http://qlbusiness.com/static/js/arrays_v2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="icon" href="http://getbootstrap.com/dist/css/favicon.ico">
<title>Insert ad</title>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/jumbotron/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-waing.js"></script><![endif]-->
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-waing.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
textarea {
height: 600px !important width : 500 px !important
}
.inline {
display: inline-block;
}
.txt {
float: left;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Customer Service</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded"
action="/account/do_login" method="post">
<div class="form-group">
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="center jumbotron">
<div class="container" style="margin-top:20px; width: 75%">
<div class="ui text container">
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgO4IDA" name="formular" class="ui form" accept-charset="UTF-8"
enctype="multipart/form-data">
<div class="ui grid">
<div class="four wide column required field">
<label>Place</label>
</div>
<div class="twelve wide column field">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="region" id="region">
<option value="">«Choose state»</option>
<option value="7089183">
Alabama
</option>
<option value="7091183">
Alaska
</option>
<option value="7088186">
Arizona
</option>
<option value="7102183">
Arkansas
</option>
<option value="7095185">
Califoia
</option>
<option value="7094186">
Colorado
</option>
<option value="7097187">
Coecticut
</option>
<option value="7088187">
Delaware
</option>
<option value="7101184">
Florida
</option>
<option value="7090186">
Georgia
</option>
<option value="7095186">
Hawaii
</option>
<option value="7095187">
Idaho
</option>
<option value="7101185">
Illinois
</option>
<option value="7090187">
Indiana
</option>
<option value="7102184">
Iowa
</option>
<option value="7092184">
Kansas
</option>
<option value="7098186">
Kentucky
</option>
<option value="7100184">
Louisiana
</option>
<option value="7091184">
Maine
</option>
<option value="7089185">
Maryland
</option>
<option value="7096187">
Massachusetts
</option>
<option value="7096188">
Michigan
</option>
<option value="7098188">
Miesota
</option>
<option value="7102185">
Mississippi
</option>
<option value="7094187">
Missouri
</option>
<option value="7093186">
Montana
</option>
<option value="7091185">
Nebraska
</option>
<option value="7102186">
Nevada
</option>
<option value="7093187">
New Hampshire
</option>
<option value="7090188">
New Jersey
</option>
<option value="7094188">
New Mexico
</option>
<option value="7099184">
New York
</option>
<option value="7101186">
North Carolina
</option>
<option value="7092185">
North Dakota
</option>
<option value="7098189">
Ohio
</option>
<option value="7091186">
Oklahoma
</option>
<option value="7097188">
Oregon
</option>
<option value="7088189">
Pesylvania
</option>
<option value="7098190">
Rhode Island
</option>
<option value="7093188">
South Carolina
</option>
<option value="7094189">
South Dakota
</option>
<option value="7097189">
Teessee
</option>
<option value="7101187">
Texas
</option>
<option value="7090189">
Utah
</option>
<option value="7088190">
Vermont
</option>
<option value="7097190">
Virginia
</option>
<option value="7099185">
Washington
</option>
<option value="7091187">
West Virginia
</option>
<option value="7098191">
Wisconsin
</option>
<option value="7101188">
Wyoming
</option>
</select>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="required field">
<label>City</label>
</div>
</div>
<div class="twelve wide column">
<div id="cities" class="column field">
<select class="ui dropdown"
onchange="cities(this);document.getElementById('area').display='';"
name="area" id="area" data-validate='area'>
<option value="">«Choose city»</option>
</select>
</div>
</div>
</div>
<div class="ui grid" id="category_contents">
<div class="four wide column required field">
<label>Subject</label>
</div>
<div class="twelve wide column field">
<input onchange="cchng()" type="text" name="title" >
</div>
<div class="four wide column required field">
<label><label for="text">Ad text</label></label>
</div>
<div class="twelve wide column field">
<textarea cols="45" id="text" name="text" rows="10"></textarea>
</div>
<div class="four wide column ">
<label> Price</label>
</div>
<div class="twelve wide column">
<div class="input-group">
<span class="input-group-addon">
Rs
</span>
<input type="text" name="price" class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.
00</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image1" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image2a" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image3" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image4" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Image</label>
</div>
<div class="twelve wide column">
<input name="image1" size="35" id="image5" type="file">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Terms</label>
</div>
<div class="twelve wide column">
<div class="ui checkbox">
<input id="terms" type="checkbox">
<label for="terms">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div class="ui error message"></div>
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
</div>
<div class="twelve wide column">
<div id="loading" class="progressBar">
<div class="ui active inline loader"></div>
Waiting for response<span id="loading_dots"></span></div>
<button name="validate" type="submit" class="btn btn-success btn-lg"
onclick="showProgressBar();">
Continue
</button>
</div>
</div>
<!-- <button class="ui button" type="submit">Submit</button> -->
</form>
</div>
</div>
</div>
</div>
<script src="http://qlbusiness.com/static/ui/semantic.min.js"></script>
<script type="text/javascript">
$('.ui.form')
.form({
fields: {
name: {
identifier: 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
},
skills: {
identifier: 'email',
rules: [
{
type : 'empty',
prompt : 'Please enter your email'
}
]
},
region: {
identifier: 'region',
rules: [
{
type : 'empty',
prompt : 'Please select a region'
}
]
},
area: {
identifier: 'area',
rules: [
{
type : 'empty',
prompt : 'Please select a city'
}
]
},
text: {
identifier: 'text',
rules: [
{
type : 'empty',
prompt : 'Please enter a text'
},
{
type : 'minLength[6]',
prompt : 'Your text must be at least {ruleValue} characters'
}
]
},
title: {
identifier: 'title',
rules: [
{
type : 'empty',
prompt : 'Please enter a title'
},
{
type : 'minLength[6]',
prompt : 'Your title must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type : 'checked',
prompt : 'You must agree to the terms and conditions'
}
]
}
}
})
;
</script>
</body>
</html>