JQuery UI Dialog Box Display Correctly

Question

I created a validation to check if a person is less than 18 years of age. If the person is less than 18 years of age a dialog box opens. I'm using JQuery UI dialog-box to do this, but the dialog-box looks messed up (see picture). I don't know what i'm doing wrong here. How do i make the dialog box display correctly?

		function myFunction() {
			today = new Date();
			todayYear = today.getFullYear();
			todayMonth = today.getMonth();
			todayDay = today.getDay();
		    var x = document.getElementById("DOB").value;
			birthDate = new Date(x);
			birthYear = birthDate.getFullYear();
			birthMonth = birthDate.getMonth();
			birthDay = birthDate.getDay();

			age = todayYear - birthYear;
			
			if (todayMonth < birthMonth - 1 ){
				age--;
			}
			
			
			if (age < 18){
				$( function() {
					$('<div></div>').dialog({
					  modal: true,
					  title: "Age Check?",
					  open: function () {
						var markup = 'Applicant is not 18 years old. Do you wish to continue?';
						$(this).html(markup);
					  },
					  buttons: {
						'Confirm': function() {
						   $(this).dialog('close');
						},
						'Change': function() {
						   $('#DOB').val('');
						   $(this).dialog('close');
						}
					  }
					});
				  } );  
				
			}
		}

<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input name="DOB" onchange="myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY">

Your datepicker don't even work. if you import <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> then you don't need to import <script src="https://code.jquery.com/jquery-1.12.4.js"></script> second time. anyways, did you want to open a modal dialog box? — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Apr 4, 2017 at 4:45

RonyLoud · Accepted Answer · 2017-04-04 04:50:50Z

1

jquery-ui.css is missing

function myFunction() {
			today = new Date();
			todayYear = today.getFullYear();
			todayMonth = today.getMonth();
			todayDay = today.getDay();
		    var x = document.getElementById("DOB").value;
			birthDate = new Date(x);
			birthYear = birthDate.getFullYear();
			birthMonth = birthDate.getMonth();
			birthDay = birthDate.getDay();

			age = todayYear - birthYear;
			
			if (todayMonth < birthMonth - 1 ){
				age--;
			}
			
			
			if (age < 18){
				$( function() {
					$('<div></div>').dialog({
					  modal: true,
					  title: "Age Check?",
					  open: function () {
						var markup = 'Applicant is not 18 years old. Do you wish to continue?';
						$(this).html(markup);
					  },
					  buttons: {
						'Confirm': function() {
						   $(this).dialog('close');
						},
						'Change': function() {
						   $('#DOB').val('');
						   $(this).dialog('close');
						}
					  }
					});
				  } );  
				
			}
		}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<input name="DOB" onchange="javascript:myFunction()" type="date" class="form-control" id="DOB" required style=Width:60%; position:relative; placeholder="MM/DD/YYYY">

answered Apr 4, 2017 at 4:50

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

taji01 Over a year ago

Do you know why the code works online for example, if i use Jfiddle i see the dialog-box and validation works properly. But the same code i open it locally it doesn't work. I cant even see the dialog-box show up.

RonyLoud Over a year ago

just include jquery-ui.css. Check html of fiddle

taji01 Over a year ago

locally it was complaining about adding the extra https:// in the beginning of the references. Thanks this worked.

Collectives™ on Stack Overflow

JQuery UI Dialog Box Display Correctly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related