DEV Community: Abdulla Fajal

Implement Form Validation in HTML CSS and JavaScript

Abdulla Fajal — Fri, 26 May 2023 10:47:05 +0000

Form validation is a crucial aspect of web development that ensures user-submitted data is accurate, complete, and in the expected format. We can enhance the user experience, improve data integrity, and prevent potential errors or security vulnerabilities by validating form inputs before processing them.

This article will explore how to implement form validation using HTML, CSS, and JavaScript. We’ll cover the essential techniques and demonstrate practical examples you can apply to your web projects. Let’s dive in!

HTML Structure:
To begin with, let’s set up the HTML structure for our form. We’ll create a simple form that collects user information, such as name, email, and password. Open your favourite text editor and create a new HTML file, then enter the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Fontawesome CDN Link For Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
    <link rel="stylesheet" href="style.css">
    <title>Form Validation | Espere.in</title>
</head>
<body>
    <form action="#">
        <h2>Signup Form</h2>
        <div class="form-group fullname">
          <label for="fullname">Full Name</label>
          <input type="text" id="fullname" placeholder="Enter your full name">
        </div>
        <div class="form-group email">
          <label for="email">Email Address</label>
          <input type="text" id="email" placeholder="Enter your email address">
        </div>
        <div class="form-group password">
          <label for="password">Password</label>
          <input type="password" id="password" placeholder="Enter your password">
          <i id="pass-toggle-btn" class="fa-solid fa-eye"></i>
        </div>
        <div class="form-group date">
          <label for="date">Birth Date</label>
          <input type="date" id="date" placeholder="Select your date">
        </div>
        <div class="form-group gender">
          <label for="gender">Gender</label>
          <select id="gender">
            <option value="" selected disabled>Select your gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div class="form-group submit-btn">
          <input type="submit" value="Submit">
        </div>
      </form>
      <!-- JavaScript code -->
      <script src="script.js"></script>
</body>
</html>

This section includes the HTML doctype declaration <!DOCTYPE html>. It also sets the language of the document to English using the lang attribute in the tag.

In the

section, various meta tags are included for character encoding, compatibility, and viewport settings.

Additionally, there are two tags. The first link is for the Font Awesome CDN (Content Delivery Network), which provides icons for the form. The second link is for an external CSS file named style.css.

Inside the

tag, there is a element. The form has various form fields for users to input their information.

The <h2> heading displays the title of the form as "Signup Form".

Each form field is enclosed in a

element with a specific class (form-group) for styling purposes.

The form fields include:

Full Name: A text input field with the id “fullname” and a placeholder text “Enter your full name”.

Email Address: A text input field with the id “email” and a placeholder text “Enter your email address”.

Password: A password input field with the id “password” and a placeholder text “Enter your password”. There is also an eye icon provided by Font Awesome (fa-eye) to toggle password visibility.

Birth Date: A date input field with the id “date” and a placeholder text “Select your date”.

Gender: A select dropdown with the id “gender” and options for selecting the gender.

Finally, there is a submit button with the text “Submit”.

At the end of the HTML file, there is a tag that references an external JavaScript file named script.js. This is where you would write the JavaScript code to handle form validation and other functionality.

In the next part, we’ll continue with the CSS styling and move on to implementing the JavaScript code for form validation.

Please let me know if you would like to continue with the rest of the article or if there’s anything specific you’d like to learn about form validation.

CSS Styling: 
Now that we have set up the HTML structure, let’s proceed with styling the form using CSS. Open the styles.css file and add the following CSS code: 

<div class="highlight"><pre class="highlight plaintext"><code>@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&amp;display=swap');

{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } body { display: flex; align-items: center; justify-content: center; padding: 0 10px; min-height: 100vh; background: #2C7873; } form { padding: 25px; background: #fff; max-width: 500px; width: 100%; border-radius: 7px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); } form h2 { font-size: 27px; text-align: center; margin: 0px 0 30px; } form .form-group { margin-bottom: 15px; position: relative; } form label { display: block; font-size: 15px; margin-bottom: 7px; } form input, form select { height: 45px; padding: 10px; width: 100%; font-size: 15px; outline: none; background: #fff; border-radius: 3px; border: 1px solid #bfbfbf; } form input:focus, form select:focus { border-color: #9a9a9a; } form input.error, form select.error { border-color: #f91919; background: #f9f0f1; } form small { font-size: 14px; margin-top: 5px; display: block; color: #f91919; } form .password i { position: absolute; right: 0px; height: 45px; top: 28px; font-size: 13px; line-height: 45px; width: 45px; cursor: pointer; color: #939393; text-align: center; } .submit-btn { margin-top: 30px; } .submit-btn input { color: white; border: none; height: auto; font-size: 16px; padding: 13px 0; border-radius: 5px; cursor: pointer; font-weight: 500; text-align: center; background: #2C7873; transition: 0.2s ease; } .submit-btn input:hover { background: #40ada6; } </code></pre></div>

The CSS code begins with an @import statement that imports the 'Open Sans' font from Google Fonts. This font will be used for the entire document.

The * selector applies the following styles to all elements on the page:

margin: 0; and padding: 0; set the margin and padding of all elements to zero, effectively removing any default spacing. 
box-sizing: border-box; ensures that the total width and height of an element includes the padding and border, rather than being added on top of it. This prevents the element from expanding beyond its intended size. 
font-family: 'Open Sans', sans-serif; sets the font family for all elements to 'Open Sans', a sans-serif font. If 'Open Sans' is not available, it falls back to the default sans-serif font. 
The body selector applies styles to the <body> element:

display: flex; creates a flex container, allowing its child elements to be aligned and positioned using a flexbox. 
align-items: center; and justify-content: center; center the content horizontally and vertically within the flex container. 
padding: 0 10px; sets a left and right padding of 10 pixels for the body content. 
min-height: 100vh; sets the minimum height of the body to 100% of the viewport height, ensuring that the content fills the screen. 
background: #2C7873; sets the background color of the body to a shade of green. 
The form selector applies styles to the <form> element:

padding: 25px; adds padding around the form content. 
background: #fff; sets the background color of the form to white. 
max-width: 500px; sets the maximum width of the form to 500 pixels. 
width: 100%; ensures that the form takes up the full width of its container. 
border-radius: 7px; rounds the corners of the form, giving it a slightly curved appearance. 
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); adds a subtle box shadow to the form, giving it a 3D effect. 
The form h2 selector applies styles to the <h2> element within the form:

font-size: 27px; sets the font size of the heading to 27 pixels. 
text-align: center; centers the text horizontally within the heading. 
margin: 0px 0 30px; sets the margin of the heading, with no top margin, no left or right margin, and a bottom margin of 30 pixels. 
The form .form-group selector applies styles to the <div> elements with the class "form-group" within the form:

margin-bottom: 15px; adds a margin at the bottom of each form group, creating vertical spacing between them. 
position: relative; sets the position of the form group as relative, allowing the absolute positioning of child elements within it. 
The code snippet continues with more CSS styles for different form elements and classes, such as labels, inputs, error states, submit buttons etc.

With these CSS styles, our form will have a clean and visually appealing layout. Feel free to modify the styles to match your preferences or the overall design of your website.

JavaScript Validation: 
Now, let’s move on to implementing the JavaScript code for form validation.

To read more full articles click here👇

<a href="https://espere.in/Implement-Form-Validation-in-HTML-CSS-and-JavaScript/">https://espere.in/Implement-Form-Validation-in-HTML-CSS-and-JavaScript/</a>

WhatsApp login in Django Application using OPT-less

Abdulla Fajal — Thu, 11 May 2023 13:17:28 +0000

Liquid syntax error: Unknown tag 'static'

How to create a translate project with Django

Abdulla Fajal — Tue, 09 May 2023 06:11:25 +0000

This article will create a translator app using Django, Django is a popular Python web framework. This app will allow users to input text in one language and receive a translation in another language. We will be using the translate python package to do the translation. If you want to learn Python and Django, then our courses are available, you can see them. Let us begin without wasting your time at all.

I think Django will be already installed in your system If not then you can install it like this:

pip install django

And Install the translate package:

pip install translate

Now let's create our project:

django-admin startproject translator

A project named movie will be created, you can do cd movie and go inside it.

cd translator

You have to create an app, you can give any name to the project and app, we have given it the name of app.

python manage.py startapp app

Now you have to mention this app in your project setting in INSTALLED_APPS

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "app", # new
]

Create views that handle the translation. Now we need to create a view that will handle the translation. Open up app/views.py and add the following code:

from django.shortcuts import render
from translate import Translator

# Create your views here.


def home(request):
    if request.method == "POST":
        text = request.POST["translate"]
        to_lang = request.POST["tolanguage"]
        from_lang = request.POST["fromlanguage"]
        translator = Translator(to_lang=to_lang, from_lang=from_lang)
        translation = translator.translate(text)

        context = {
            "translation": translation,
        }
        return render(request, "home.html", context)
    return render(request, "home.html")

This code defines a view function called home() which is associated with the route for the homepage ("/") in a Django web application.

The function starts by checking the request method. If the request method is "POST", the function extracts data from the form submitted through the POST method. The text variable contains the text entered in the form, the to_lang variable contains the target language selected in the form and the from_lang variable contains the source language selected in the form.
A new instance of the Translator class from the translate module is then created, passing in the to_lang and from_lang variables as parameters. The translate() method of the Translator instance is then called with text as the argument to translate the text. The translated text is then stored in the translation variable.

Finally, a dictionary named context is created, which contains the translated text as a value associated with the key "translation". The home() function then renders the "home.html" template, passing in the context dictionary as a context variable.

If the request method is not "POST", the function simply renders the "home.html" template without any context variable.

We have to create the template mentioned in the views, and for that, we have to create a directory named templates inside our app, in that, we will write the code of the template.

Mastering Control Flow: A Beginner's Guide to Python Loops

Abdulla Fajal — Fri, 24 Mar 2023 11:31:08 +0000

Control flow is a fundamental concept in programming that allows developers to control the order of execution of statements in their code. In Python, there are several constructs that allow you to implement control flow, with loops being one of the most commonly used. In this beginner’s guide to Python loops, we will explore how to use loops to iterate over sequences, perform repeated actions, and more.

What are Loops?

Loops are constructs in programming that allow you to repeat a set of instructions multiple times. In Python, there are two types of loops: for loops and while loops. Both loops allow you to execute a block of code repeatedly, but they differ in how they control the number of iterations.

The for Loop

The for loop is used to iterate over a sequence of items. A sequence can be any collection of items, including lists, tuples, and strings. The basic syntax of a for loop is as follows:

for item in sequence:
    # do something with item

The for loop starts by initializing a variable item to the first item in the sequence. It then executes the block of code inside the loop, which can access the current value of item and perform some action on it. After the block of code is executed, the loop moves on to the next item in the sequence and repeats the process until all items have been processed.

Let’s look at an example of a for loop that iterates over a list of numbers and prints out each number:

numbers = [1, 2, 3, 4, 5]
for number in numbers:
    print(number)

Output:

In this example, the for loop iterates over the list of numbers, and for each number, it prints out the value of the variable number. The loop continues until all items in the list have been processed.

The range() Function

In some cases, you may need to execute a block of code a specific number of times, rather than iterating over a sequence of items. In such cases, you can use the range() function to generate a sequence of numbers that can be used in a for loop.The range() function takes one, two, or three arguments, depending on how you want to use it. The basic syntax is as follows:

range(stop)
range(start, stop)
range(start, stop, step)

The range() function generates a sequence of numbers that starts at start, ends at stop (exclusive), and increments by step (default is 1). Here are some examples:

# generate a sequence of numbers from 0 to 4 (exclusive)
for i in range(5):
    print(i)
# generate a sequence of numbers from 2 to 5 (exclusive)
for i in range(2, 5):
    print(i)
# generate a sequence of numbers from 0 to 10 (exclusive), incrementing by 2
for i in range(0, 10, 2):
    print(i)

Output:

The while Loop

The while loop is used to execute a block of code repeatedly as long as a certain condition is true. The basic syntax of a while loop is as follows:

while condition:
    # do something

The while loop starts by checking the condition. If the condition is true, the loop executes the block of code inside it. After the block of code is executed, the condition is checked again. If it is still true, the block of code is executed again, and the process repeats until the condition becomes false.

Let’s look at an example of a while loop that counts down from 5 to 1:

count = 5
while count > 0:
    print(count)
    count -= 1

Output:

In this example, the while loop executes as long as the value of count is greater than 0. Each time the loop iterates, it prints the current value of count and subtracts 1 from it, until count becomes 0 and the loop exits.

For Read More Click Here Espere.in

10 Django Built-in Views You Need to Know for Your Next Project

Abdulla Fajal — Thu, 23 Mar 2023 08:35:58 +0000

Django is a powerful web framework for building web applications quickly and efficiently. It includes many built-in views that can be used to handle common tasks such as displaying a list of objects, creating new objects, and editing existing objects. In this answer, I will cover 10 Django built-in views that you should know for your next project, along with proper explanations and examples.

ListView

ListView The ListView is a built-in view that displays a list of objects from a model. It is commonly used to display a list of blog posts, products, or other types of content. Here's an example:

from django.views.generic import ListView
from .models import Post

class PostListView(ListView):
    model = Post
    template_name = 'blog/post_list.html'
    context_object_name = 'posts'
    ordering = ['-date_posted']

In this example, the ListView is used to display a list of blog posts from the Post model. The template_name attribute specifies the template to use for rendering the view, and the context_object_name attribute specifies the name of the context variable that will contain the list of objects.

DetailView

DetailView The DetailView is a built-in view that displays the details of a single object from a model. It is commonly used to display a blog post, product details, or other types of content. Here's an example:

from django.views.generic import DetailView
from .models import Post

class PostDetailView(DetailView):
    model = Post
    template_name = 'blog/post_detail.html'
    context_object_name = 'post'

In this example, DetailView is used to display the details of a single blog post from the Post model. The template_name attribute specifies the template to use for rendering the view, and the context_object_name attribute specifies the name of the context variable that will contain the object.

CreateView

CreateView The CreateView is a built-in view that displays a form to create a new object from a model. It is commonly used to create new blog posts, products, or other types of content. Here's an example:

from django.views.generic import CreateView
from .models import Post
from .forms import PostForm

class PostCreateView(CreateView):
    model = Post
    form_class = PostForm
    template_name = 'blog/post_form.html'

In this example, the CreateView is used to display a form to create a new blog post from the Post model. The form_class attribute specifies the form to use for rendering the form, and the template_name attribute specifies the template to use for rendering the view.

UpdateView

UpdateView The UpdateView is a built-in view that displays a form to edit an existing object from a model. It is commonly used to edit blog posts, products, or other types of content. Here's an example:

from django.views.generic import UpdateView
from .models import Post
from .forms import PostForm

class PostUpdateView(UpdateView):
    model = Post
    form_class = PostForm
    template_name = 'blog/post_form.html'

In this example, the UpdateView is used to display a form to edit an existing blog post from the Post model. The form_class attribute specifies the form to use for rendering the form, and the template_name attribute specifies the template to use for rendering the view.

DeleteView

DeleteView The DeleteView is a built-in view that displays a confirmation page before deleting an object from a model. It is commonly used to delete blog posts, products, or other types of content. Here's an example:

from django.views.generic import DeleteView
from .models import Post
from django.urls import reverse_lazy

class PostDeleteView(DeleteView):
    model = Post
    template_name = 'blog/post_confirm_delete.html'
    success_url = reverse_lazy('blog-home')

In this example, the DeleteView is used to display a confirmation page before deleting a blog post from the Post model. The template_name attribute specifies the template to use for rendering the view, and the success_url attribute specifies the URL to redirect to after the object is deleted.

FormView

FormView The FormView is a built-in view that displays a form and processes user input. It can be used to implement custom forms or handle form submissions. Here's an example:

from django.views.generic import FormView
from .forms import ContactForm
from django.urls import reverse_lazy

class ContactView(FormView):
    form_class = ContactForm
    template_name = 'contact.html'
    success_url = reverse_lazy('contact-success')

    def form_valid(self, form):
        form.send_email()
        return super().form_valid(form)

In this example, the FormView is used to display a contact form and send an email when the form is submitted. The form_class attribute specifies the form to use for rendering the form, and the template_name attribute specifies the template to use for rendering the view. The success_url attribute specifies the URL to redirect to after the form is successfully submitted. The form_valid() method is overridden to send the email when the form is submitted.

For Read More Click Here Espere.in