Required and pattern

HTML & CSS
1

What would be the HTML of this css, want to creat a alert when textbox empty/patter invalid/.

The css code is :

#popup_container {
	font-family: Arial, sans-serif;
	font-size: 12px;
	min-width: 300px; /* Dialog will be no smaller than this */
	max-width: 400px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 5px #999;
	color: #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#popup_title {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75em;
	color: #666;
	background: #CCC url('https://www.airtel.in/common/images/title.gif') top repeat-x;
	border: solid 1px #FFF;
	border-bottom: solid 1px #999;
	cursor: default;
	padding: 0em;
	margin: 0em;
}

#popup_content {
	background: 16px 16px no-repeat url('https://www.airtel.in/common/images/info.gif');
	padding: 1em 1.75em;
	margin: 0em;
}

#popup_content.alert {
	background-image: url('https://www.airtel.in/common/images/important.gif');
}

#popup_content.confirm {
	background-image: url('https://www.airtel.in/common/images/important.gif');
}

#popup_content.prompt {
	background-image: url('https://www.airtel.in/common/images/help.gif');
}

#popup_message {
	padding-left: 48px;
}

#popup_panel {
	text-align: center;
	margin: 1em 0em 0em 1em;
}

#popup_prompt {
	margin: .5em 0em;
}

What is the html and js if the alert when error and it show.

<Input type="text" pattern="#" required/>

Image:

2

Isn’t this question a bit backwards? Usually you write the html for the structure of what you want, and then you style it with CSS. Not write the html to try to fit some CSS. Have you studied html at all, so that you can provide a start with the code?

1 Like
3

I am not Understand what you are saying… write short teach more…

4

??? I don’t understand what you’re saying here.

What @WebMachine is saying is the “typical” method is to ensure your html is working before you worry about your styling. So including the css here is an unneeded distraction. Get your html working as you expect before you make it pretty.

That being said, this link will guide you on BOTH getting the HTML set up and getting an appropriate error response (hint: popups may not be the most pleasant way to handle these types of errors. There are more elegant solutions in the linked page.

If you’re having specific styling issues AFTER you’re applied some of the concepts here, please feel free to repost with your current page and styling.

2 Likes
5

I have already send CSS

6

Yes, and it’s been explained to you that your approach is the wrong way round. You should always start by ensuring you have well-structured HTML in place, and then add the CSS to it.

To have CSS first, you must have copied it from somewhere. I suggest you find the HTML that goes with your CSS, and use that as a basis to work from, adjusting it to suit your needs.

7

I copied this css from here where I am unable to find what it’s html. I am providing you a screenshot of alert. How it’s looking. But again if you want to watch live of alert please visit link and click green button “SUBMIT” the popup show automatically if it’s empty.

8

OK. When you visit that page, right-click on the alert, and choose “Inspect element” (or something similar) from the menu. The developer tools will show you the relevant HTML.

9

I am using phone.

10

How did you manage to copy the CSS?

11

It’s very complicated story. Don’t ask…

12

Are you retired FBI Argent?

13

I’m the person who’s trying to help you, despite a certain lack of cooperation and some degree of belligerence on your part.

I was asking how you managed to copy the CSS to try to understand and to help you access the HTML. The best I can do in the circumstances is to tell you to wait until you have access to a computer and then follow my instruction above. Presumably you do have access to a computer somewhere, as you were taking a course in web design.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.