Question

我的标签小部件仍然显示为列表。我已经链接了正确的JS UI和CSS。我已经查看了一百次文档，看不到我错过的内容。我猜它必须是一个不正确的链接。选项卡显示为列表。

from django.contrib.postgres import fields, forms
import yaml
from django.utils.translation import gettext_lazy as _

class InvalidYAMLInput(str):
    pass


class YAMLString(str):
    pass


class YAMLFormField(forms.JSONField):
    default_error_messages = {
        'invalid': _("'%(value)s' value must be valid YAML."),
    }

    def to_python(self, value):
        if self.disabled:
            return value
        if value in self.empty_values:
            return None
        elif isinstance(value, (list, dict, int, float, YAMLString)):
            return value
        try:
            converted = yaml.load(value)
        except yaml.YAMLError:
            raise forms.ValidationError(
                self.error_messages['invalid'],
                code='invalid',
                params={'value': value},
            )
        if isinstance(converted, str):
            return YAMLString(converted)
        else:
            return converted

    def bound_data(self, data, initial):
        if self.disabled:
            return initial
        try:
            return yaml.load(data)
        except yaml.YAMLError:
            return InvalidYAMLInput(data)

    def prepare_value(self, value):
        if isinstance(value, InvalidYAMLInput):
            return value
        return yaml.dump(value, default_flow_style=False)


class YAMLField(fields.JSONField):
    def formfield(self, **kwargs):
        defaults = {'form_class': YAMLFormField}
        defaults.update(kwargs)
        return super().formfield(**defaults)

JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reservation request</title>
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="reservationTab.js"></script>
</head>

<body>
    <h1>Reservation Request</h1>
    <form action="response.html" method="get"
        name="reservation_form" id="reservation_form">

        <div id ="tabs">
            <ul>
                <li> <a href="#tabs-1"> General Information </a> </li>
                <li> <a href="#tabs-2"> Preferences </a> </li>
                <li> <a href="#tabs-3"> Contact </a> </li>
            </ul>

            <div id="tabs-1">
                <label for="arrival_date">Arrival date:</label>
                <input type="text" name="arrival_date" id="arrival_date" placeholder="M/D/YYYY" autofocus>
                <span>*</span><br>
                <label for="nights">Nights:</label>
                <input type="text" name="nights" id="nights">
                <span>*</span><br>
                <label>Adults:</label>
                <select name="adults" id="adults">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>                                                
                </select><br>
                <label>Children:</label>
                <select name="children" id="children">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>                                                
                </select><br>           
            </div><!--tab1: genInfo-->

            <div id="tabs-2">
                <label>Room type:</label>
                <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp;               
                <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp;
                <input type="radio" name="room" id="suite" class="left last">Suite<br>
                <label>Bed type:</label>
                <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp;
                <input type="radio" name="bed" id="double" class="left last">Double Double<br>
                <input type="checkbox" name="smoking" id="smoking">Smoking<br>
            </div> <!--tab2: Pref-->

            <div id="tabs-3">
                <label for="name">Name:</label>
                <input type="text" name="name" id="name">
                <span>*</span><br>
                <label for="email">Email:</label>
                <input type="text" name="email" id="email">
                <span>*</span><br>
                <label for="phone">Phone:</label>
                <input type="text" name="phone" id="phone" placeholder="999-999-9999">
                <span>*</span><br>
            </div> <!--tab3: contactInfo-->

        </div> <!--end tabs div-->



            <input type="button" id="policies" value="View Cancellation Policies">
            <input type="submit" id="submit" value="Submit Request">
            <div id="dialog" title="Cancellation Policies" style="display: none;">
                <p>Notification of cancellation or arrival date change must be 
                received more than three days (72 hours) prior to the confirmed arrival date for the 
                reservation deposit to be refundable. Email notification is acceptable, and a cancellation
                confirmation will be sent to you. Failure to check-in on the scheduled arrival date 
                will result in the cancellation of the reservation including any remaining nights, 
                and the reservation deposit shall be forfeited.</p>
            </div><br>          


    </form>

</body>
</html>

Answer 1

试试这个：

$(document).ready(function() {
	var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
	
	// move the focus to the first text box
	$("#arrival_date").focus();
	
	//for tabs
	$("#tabs").tabs();
	
	// the handler for the submit event of the form
	// executed when the submit button is clicked
	$("#reservation_form").submit(
		function(event) {
			var isValid = true;
			
			// validate the requested arrival date
			var arrivalDate = $("#arrival_date").val().trim();
			if (arrivalDate == "") {
				$("#arrival_date").next().text("This field is required.");
				isValid = false;
			} else {
				$("#arrival_date").next().text("");				
			}
			$("#arrival_date").val(arrivalDate);
			
			// validate the number of nights
			var nights = $("#nights").val().trim();
			if (nights == "") {
				$("#nights").next().text("This field is required.");
				isValid = false;
			} else if (isNaN($("#nights").val())) {
				$("#nights").next().text("This field must be numeric.");
				isValid = false;
			} else {
				$("#nights").next().text("");
			}
			$("#nights").val(nights);		

			// validate the name entry
			var name = $("#name").val().trim();
			if (name == "") {
				$("#name").next().text("This field is required.");
				isValid = false;
			} 
			else {
				$("#name").val(name);
				$("#name").next().text("");
			}
			$("#name").val(name);
						
			// validate the email entry with a regular expression
			var email = $("#email").val();
			if (email == "") { 
				$("#email").next().text("This field is required.");
				isValid = false;
			} else if ( !emailPattern.test(email) ) {
				$("#email").next().text("Must be a valid email address.");
				isValid = false;
			} else {
				$("#email").next().text("");
			}
			$("#email").val(email); 
			
			// validate the phone number
			var phone = $("#phone").val().trim();
			if (phone == "") { 
				$("#phone").next().text("This field is required.");
				isValid = false; 
			} else {
				$("#phone").next().text("");
			}
			$("#phone").val(phone);
			
			// prevent the submission of the form if any entries are invalid 
			if (isValid == false) {
				event.preventDefault();				
			}
		} // end function
	);	// end submit
}); // end ready

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    background-color: white;
    margin: 0 auto;
    width: 600px;
    border: 3px solid blue;
    padding: 10px 20px;
}
legend {
    color: blue;
    font-weight: bold;
    margin-bottom: .8em;
}
label {
	float: left;
    width: 100px;
}
input, select {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: .5em;
}
input {
    width: 14em;	
}
input.left {
	width: 1em;
	padding-left: 0;
}
fieldset {
	border: none;
	margin-left: 0;
	margin-top: 1em;
	padding: 0;
}
input.last {
	margin-bottom: 1em;
}
#adults, #children {
	width: 35px;
}
#smoking {
	width: 1em;
	margin-left: 0;
}
#policies {
	margin-left: 0;
	width: 15em;
}
#submit {
	width: 10em;
}
#dialog p {
	font-size: 85%;
}
span {
	color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Reservation request</title>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- jQuery UI library -->
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
	
<body>
	<h1>Reservation Request</h1>
	<form action="response.html" method="get"
    	name="reservation_form" id="reservation_form">
    	
    	<div id ="tabs">
    		<ul>
    			<li> <a href="#tabs-1"> General Information </a> </li>
    			<li> <a href="#tabs-2"> Preferences </a> </li>
    			<li> <a href="#tabs-3"> Contact </a> </li>
    		</ul>
    		
    		<div id="tabs-1">
	    		<label for="arrival_date">Arrival date:</label>
	        	<input type="text" name="arrival_date" id="arrival_date" placeholder="M/D/YYYY" autofocus>
	        	<span>*</span><br>
	        	<label for="nights">Nights:</label>
	        	<input type="text" name="nights" id="nights">
	        	<span>*</span><br>
	        	<label>Adults:</label>
	        	<select name="adults" id="adults">
	        		<option value="1">1</option>
	        		<option value="2">2</option>
	        		<option value="3">3</option>
	        		<option value="4">4</option>        		        		        		
	        	</select><br>
	        	<label>Children:</label>
	        	<select name="children" id="children">
	        		<option value="0">0</option>
	        		<option value="1">1</option>
	        		<option value="2">2</option>
	        		<option value="3">3</option>
	        		<option value="4">4</option>        		        		        		
	        	</select><br>        	
    		</div><!--tab1: genInfo-->
    		
    		<div id="tabs-2">
	    		<label>Room type:</label>
				<input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp;	        	
				<input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp;
				<input type="radio" name="room" id="suite" class="left last">Suite<br>
	        	<label>Bed type:</label>
				<input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp;
				<input type="radio" name="bed" id="double" class="left last">Double Double<br>
				<input type="checkbox" name="smoking" id="smoking">Smoking<br>
    		</div> <!--tab2: Pref-->
    		
    		<div id="tabs-3">
    			<label for="name">Name:</label>
				<input type="text" name="name" id="name">
				<span>*</span><br>
	        	<label for="email">Email:</label>
	        	<input type="text" name="email" id="email">
	        	<span>*</span><br>
				<label for="phone">Phone:</label>
				<input type="text" name="phone" id="phone" placeholder="999-999-9999">
				<span>*</span><br>
			</div> <!--tab3: contactInfo-->
			
    	</div> <!--end tabs div-->
    

    	
    		<input type="button" id="policies" value="View Cancellation Policies">
			<input type="submit" id="submit" value="Submit Request">
			<div id="dialog" title="Cancellation Policies" style="display: none;">
				<p>Notification of cancellation or arrival date change must be 
				received more than three days (72 hours) prior to the confirmed arrival date for the 
				reservation deposit to be refundable. Email notification is acceptable, and a cancellation
				confirmation will be sent to you. Failure to check-in on the scheduled arrival date 
				will result in the cancellation of the reservation including any remaining nights, 
				and the reservation deposit shall be forfeited.</p>
			</div><br>    		
    	

	</form>
	<script src="reservationTab.js"></script>
</body>
</html>

选项卡小部件JQuery无法正确显示，正确链接已链接

1 个答案: