Web Designing: JavaScript Form Validation and User Interaction

Web designing involves creating an aesthetically pleasing and user-friendly interface for websites. One of the critical aspects of web design is the integration of JavaScript for form validation and user interaction. JavaScript allows for real-time data validation, enhancing user experience and ensuring data integrity. In this discussion, we will delve into the details of how JavaScript can be used for form validation and user interaction, highlighting important information.

Overview of Form Validation

Form validation is the process of ensuring that data entered by users into web forms meets specific criteria before being submitted to a server. It can be performed on the client side, using JavaScript, or on the server side, using languages like PHP or Node.js. However, client-side validation is often preferred as it provides instant feedback to users, reducing server load and improving the user experience.

Importance of JavaScript in Form Validation

JavaScript is particularly useful for client-side form validation because it allows developers to define rules and checks that can be executed as soon as the user interacts with a form field. These checks can include ensuring that required fields are not left empty, verifying the format of email addresses and phone numbers, or checking that password fields match.

Key Benefits of JavaScript Form Validation:

1. Real-Time Feedback: Immediate error messages can guide users to correct their inputs before submission.
2. Enhanced User Experience: Users are not required to wait for a server response to identify incorrect data.
3. Reduced Server Load: By catching errors on the client side, fewer invalid form submissions reach the server.
4. Improved Data Integrity: Ensures that the data sent to the server meets the expected format and constraints.

Implementing JavaScript Form Validation

To implement JavaScript form validation, you can use a combination of HTML5 attributes and custom JavaScript functions. Let’s explore both methods:

HTML5 Form Validation:

HTML5 introduced several attributes that can be used to validate form inputs without writing any JavaScript:

• required: Ensures that a field is not left empty.
• type: Checks that the input matches the expected format (e.g., email, number, url).
• pattern: Applies a regular expression to validate the input format.
• min and max: Specifies the valid range for numeric inputs.
• minlength and maxlength: Defines the minimum and maximum length of the input.

Example:

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required minlength="6">
  <br>
  <input type="submit" value="Submit">
</form>

Custom JavaScript Form Validation:

For more complex scenarios, custom JavaScript can be used to validate form inputs:

• Event Listeners: Use addEventListener to trigger validation functions when certain events occur (e.g., blur, input).
• Regular Expressions: Define patterns to validate input data.
• Error Messages: Provide custom error messages to guide users.

Example:

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <span id="nameError" style="color: red;"></span>
  <br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <span id="emailError" style="color: red;"></span>
  <br>
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission
    validateForm();
  });

  function validateForm() {
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;

    let isValid = true;

    if (name === '') {
      document.getElementById('nameError').textContent = 'Name is required';
      isValid = false;
    } else {
      document.getElementById('nameError').textContent = '';
    }

    if (email === '') {
      document.getElementById('emailError').textContent = 'Email is required';
      isValid = false;
    } else if (!emailPattern.test(email)) {
      document.getElementById('emailError').textContent = 'Invalid email format';
      isValid = false;
    } else {
      document.getElementById('emailError').textContent = '';
    }

    if (isValid) {
      alert('Form submitted successfully!');
      // Proceed with form submission or further processing
    }
  }
</script>

Enhancing User Interaction with JavaScript

In addition to form validation, JavaScript plays a crucial role in enhancing user interaction on websites. Interactive elements can include modal dialogs, dynamic content loading, tooltips, and responsive design features.

Common Use Cases:

1. Tooltips and Popups: Display additional information or instructions when users hover over elements.
2. Modal Dialogs: Provide feedback or ask for confirmation before proceeding with actions.
3. Dynamic Content Loading: Update parts of the page without refreshing, improving performance and user experience.
4. Responsive Design: Adapt layout and functionality to different screen sizes and devices.

Example: Modal Dialog with JavaScript:

<button id="openModalBtn">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>

<script>
document.getElementById('openModalBtn').addEventListener('click', function() {
  document.getElementById('myModal').style.display = "block";
});

document.querySelector('.close').addEventListener('click', function() {
  document.getElementById('myModal').style.display = "none";
});

window.addEventListener('click', function(event) {
  if (event.target == document.getElementById('myModal')) {
    document.getElementById('myModal').style.display = "none";
  }
});
</script>

Best Practices for JavaScript Form Validation and User Interaction

1. Accessibility: Ensure that your form and interactive elements are accessible to all users, including those with disabilities. Use semantic HTML, proper ARIA roles, and keyboard navigation.
2. Cross-Browser Compatibility: Test your JavaScript code on different browsers to ensure consistent behavior and performance.
3. Security: Validate data on both the client and server sides to prevent security vulnerabilities such as SQL injection and cross-site scripting (XSS).
4. Performance Optimization: Minimize the use of heavy scripts and optimize your code to ensure quick loading times and smooth user interactions.
5. User Feedback: Provide clear and concise error messages and feedback to guide users through the form and interaction process.

Conclusion

JavaScript is an essential tool in web design for both form validation and user interaction. By leveraging JavaScript, developers can create dynamic, responsive, and user-friendly web applications that provide immediate feedback and enhance the overall user experience. Understanding the importance of JavaScript in these areas and implementing best practices will help you build robust and effective web forms and interactive elements.

Examples, Set Route and Run the Application: Step-by-Step Guide for JavaScript Form Validation and User Interaction

When diving into web development, form validation and user interaction are crucial skills that enhance the functionality and user experience of your websites. JavaScript is a versatile language that can handle client-side validation, providing instant feedback to the user without the need for server-side processing. Here, we'll walk through an example of form validation and user interaction step-by-step, starting from setting up the environment to running the application and understanding the data flow.

Step 1: Set Up Your Environment

1.1 Choose Your Tools

First, decide on your development environment. You can use a simple text editor like Sublime Text, VS Code, or Atom, paired with your web browser for testing.

1.2 Create a Project Folder

Create a new folder on your computer to hold your project files. This will help you keep everything organized.

1.3 Basic HTML Structure

Create a basic HTML file as a starting point. Navigate to your project folder and create a file named index.html. Open it in your text editor and add the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Form Validation</title>
    <link rel="stylesheet" href="styles.css"> <!-- Optional: For styling -->
</head>
<body>
    <div class="form-container">
        <form id="myForm">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
            
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            
            <button type="submit">Submit</button>
        </form>
        <div id="message"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

1.4 Add Basic Styling

If you included a styles.css link, create the styles.css file in your project folder and add some basic styling:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

.form-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

#message {
    margin-top: 15px;
    color: red;
    font-weight: bold;
}

Step 2: JavaScript Form Validation

2.1 Create a JavaScript File

Create a script.js file in your project folder. In this file, we'll add our form validation logic.

2.2 Write the Validation Logic

Open script.js in your text editor and add the following code:

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting

    // Reset message
    document.getElementById('message').textContent = '';

    // Get form values
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const password = document.getElementById('password').value.trim();

    // Simple validation
    if (name === '') {
        document.getElementById('message').textContent = 'Name is required.';
        return false;
    }

    if (email === '') {
        document.getElementById('message').textContent = 'Email is required.';
        return false;
    }

    if (password === '') {
        document.getElementById('message').textContent = 'Password is required.';
        return false;
    }

    if (password.length < 6) {
        document.getElementById('message').textContent = 'Password must be at least 6 characters.';
        return false;
    }

    // If all validations pass, proceed with submission or whatever action you want
    document.getElementById('message').textContent = 'Form submitted successfully!';
    document.getElementById('message').style.color = 'green';
    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Password:', password);

    // Here, you would typically send the form data to the server
    // For example, using fetch API or XMLHttpRequest
    // This is beyond the scope of this simple validation example
});

Step 3: Run the Application

3.1 Test the Form Validation

Open your index.html file in a web browser. You should see a simple form with fields for Name, Email, and Password.

3.2 Interact with the Form

• Try submitting the form without entering any data. You should see an error message indicating that the Name, Email, and Password fields are required.
• Enter a name, but leave the email and password blank. You should see the appropriate error messages.
• Enter a valid email and password, but ensure the password is less than 6 characters. You should see an error message regarding the password length.
• Enter valid data for all fields and submit the form. You should see a success message, and the data should appear in the browser's console.

Step 4: Understand the Data Flow

4.1 HTML Form Submission

When you click the "Submit" button, the form submission event is triggered. By default, the browser will send the form data to the server specified in the form's action attribute. However, since no action attribute is present, or we're calling event.preventDefault(), the form does not submit.

4.2 JavaScript Validation

The JavaScript code listens for the form's submit event. When the event is triggered, the code inside the event listener function is executed. It stops the default form submission, resets any existing error messages, and retrieves the values of the form fields.

4.3 Validation Logic

The JavaScript code then performs basic validation checks, such as ensuring that fields are not empty and that the password is at least 6 characters long. If any validation fails, an appropriate error message is displayed.

4.4 Success Message and Console Output

If all validations pass, a success message is displayed, and the form data is logged to the console. This step demonstrates what to do when the form data is valid. In a real-world scenario, you would typically send the form data to the server using AJAX or a similar method.

Conclusion

In this guide, we've walked through setting up a simple web form, implementing JavaScript for client-side validation, understanding form submission, and managing user interaction. While this example uses basic validation, JavaScript's capabilities for form validation are much more extensive, allowing you to create rich and interactive user experiences. As you become more comfortable with these concepts, you can explore more advanced features such as dynamic error messages, real-time validation, and integrating with back-end services for full-fledged form handling.

Top 10 Questions and Answers on Web Designing: JavaScript Form Validation and User Interaction

1. What is JavaScript Form Validation, and why is it important in web design?

Answer: JavaScript form validation is a method of verifying the data entered by a user in an HTML form before it is sent to the server. This process checks whether the data meets certain predefined criteria (such as valid email formats, required fields, or character limits) to ensure data integrity and security. Here are several reasons why JavaScript form validation is essential in web design:

• Enhanced user experience: Provides immediate feedback to users, guiding them on what input is expected if there are errors.
• Data security: Prevents malicious users from submitting incorrect or harmful data to the server.
• Efficiency: Reduces server load by eliminating unnecessary processing of incorrect data.
• Prevents errors: Correct data ensures that server-side operations run smoothly and avoid potential bugs.

2. How can you validate form inputs to ensure they meet specific criteria?

Answer: JavaScript provides several ways to validate form inputs using different methods like built-in HTML5 attributes, CSS, and JavaScript itself. Here’s a basic example using plain JavaScript:

<form id="myForm">
    <input type="text" id="username" required>
    <input type="email" id="email" required>
    <input type="password" id="password" required>
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission for demo purposes

    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    // Username should not be empty and at least 4 characters long
    if (!username || username.length < 4) {
        alert('Username must be at least 4 characters long.');
        return;
    }

    // Email must match a basic email pattern
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    // Password must be at least 6 characters long
    if (password.length < 6) {
        alert('Password must be at least 6 characters long.');
        return;
    }

    alert('Form submitted successfully!');
});
</script>

3. Can you explain how to validate form using HTML5 attributes?

Answer: HTML5 introduced several new attributes that simplify form validation. Here are some commonly used attributes:

• required: Ensures the field is not empty.
• type: Specifies the type of data expected (e.g., email, number, tel).
• min and max: Set minimum and maximum values for numerical input.
• minlength and maxlength: Define minimum and maximum length for text input.
• pattern: Custom regular expressions to validate input.
• placeholder: Displays a hint about the expected input format.

Here’s an example:

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" required minlength="4">
    
    <label for="email">Email:</label>
    <input type="email" id="email" required>

    <label for="age">Age:</label>
    <input type="number" id="age" min="1" max="120" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" required pattern=".{6,}" title="Minimum 6 characters">

    <button type="submit">Submit</button>
</form>

4. What are the benefits and drawbacks of using HTML5 form validation?

Answer: HTML5 form validation offers several benefits, but there are also some drawbacks to be aware of:

Benefits:

• Simplicity: Easy to implement with built-in attributes.
• Immediate feedback: Displays validation messages directly in the browser.
• Accessibility: Improves accessibility by leveraging browser features.
• Reduced server load: Minimizes unnecessary server requests due to client-side validation.

Drawbacks:

• Browser compatibility: Older browsers may not support all HTML5 validation features.
• Limited customization: Custom validation messages require additional scripting.
• Depends on JavaScript: Although validation is built-in, it still relies on JavaScript for full functionality.
• Not enough security: Server-side validation is always necessary for security reasons.

5. How can CSS be used in form validation?

Answer: CSS can enhance form validation by providing visual feedback. You can use CSS classes to change the appearance of form elements based on their validity state. The :valid, :invalid, and :placeholder-shown pseudo-classes are particularly useful for this purpose.

Here’s an example:

<form id="myForm">
    <input type="email" id="email" required>
    <button type="submit">Submit</button>
</form>

<style>
input:invalid {
    border-color: red;
    background-color: #ffdddd;
}

input:valid {
    border-color: green;
    background-color: #ddffdd;
}

input:placeholder-shown {
    border-color: lightgray;
}
</style>

In this example, the input field will have a red border and pink background if it’s invalid (doesn’t match the email format or is empty) and a green border and light green background if it’s valid. When the user hasn't started typing, the border color will be light gray.

6. How do you handle form validation errors gracefully without disrupting the user interface?

Answer: Handling form validation errors gracefully involves displaying clear, helpful messages and maintaining a consistent user interface. Here are some best practices:

• Inline messages: Place error messages next to the form fields they pertain to.
• Tooltip messages: Use tooltips to display error messages on hover.
• Focus on invalid fields: Automatically focus on the first invalid field when validation fails.
• Avoid using alerts: Alerts can be disruptive and prevent users from staying on the form.
• Use animations: Gentle animations can draw attention to invalid fields without overwhelming users.
• Accessibility: Ensure that error messages are accessible to screen readers and keyboard navigation.

Here’s an example using inline error messages:

<form id="myForm">
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <span id="emailError" class="error"></span>
    <button type="submit">Submit</button>
</form>

<style>
.error {
    color: red;
    font-size: 0.9em;
}
</style>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const email = document.getElementById('email').value;
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const errorElement = document.getElementById('emailError');

    if (!email || !emailPattern.test(email)) {
        errorElement.textContent = 'Please enter a valid email address.';
        document.getElementById('email').focus();
    } else {
        errorElement.textContent = '';
        alert('Form submitted successfully!');
    }
});
</script>

7. How can you implement asynchronous form validation using AJAX?

Answer: Asynchronous form validation using AJAX allows for real-time validation without reloading the page. This is particularly useful for validating data that requires server-side checks, such as unique usernames or email addresses. Here’s how you can implement AJAX form validation:

HTML:

<form id="myForm">
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <span id="emailError" class="error"></span>
    <button type="submit">Submit</button>
</form>

CSS:

.error {
    color: red;
    font-size: 0.9em;
}

JavaScript (using Fetch API):

document.getElementById('email').addEventListener('blur', function() {
    const email = this.value;
    const errorElement = document.getElementById('emailError');

    if (email) {
        fetch(`checkEmail.php?email=${encodeURIComponent(email)}`)
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                errorElement.textContent = 'Email already exists.';
            } else {
                errorElement.textContent = '';
            }
        })
        .catch(error => console.error('Error:', error));
    }
});

document.getElementById('myForm').addEventListener('submit', function(event) {
    const errorElement = document.getElementById('emailError');
    if (errorElement.textContent) {
        event.preventDefault(); // Prevent form submission if there's an error
        alert('Please correct the errors before submitting.');
    }
});

PHP (checkEmail.php):

<?php
// Assume this file connects to the database and checks if the email exists
$email = $_GET['email'];

// Dummy check
$exists = false;
if ($email === 'test@example.com') {
    $exists = true;
}

echo json_encode(['exists' => $exists]);
?>

In this example, whenever the user blurs out of the email field, an AJAX request is sent to checkEmail.php to check if the email already exists in the database. The server responds with a JSON object indicating whether the email exists. If it does, an error message is displayed immediately.

8. What are the best practices for enhancing user interaction in forms?

Answer: Enhancing user interaction in forms improves user experience and engagement. Here are several best practices:

• Clear labels and placeholders: Use descriptive labels and placeholders to guide users.
• Progress indicators: Show progress indicators for multi-step forms or file uploads.
• Responsive design: Ensure forms are mobile-friendly and adapt to different screen sizes.
• Error handling: Provide clear, instant feedback on errors and how to fix them.
• Accessibility: Follow accessibility guidelines to make forms usable for all users.
• Keyboard navigation: Ensure forms are navigable using the keyboard.
• Help icons: Provide help icons or tooltips for complex fields.
• Focus management: Highlight or focus on fields that require attention or have errors.
• Consistent design: Use a consistent design across the form to maintain a professional appearance.
• Submit button: Use clear, action-oriented labels for submit buttons (e.g., "Submit," "Sign Up").
• Loading indicators: Display loading indicators while the form is being processed.
• Confirmation messages: Provide confirmation messages after successful submissions.

9. How do you ensure that form validation works across different browsers?

Answer: Ensuring cross-browser compatibility for JavaScript form validation requires careful testing and adherence to standards. Here are some strategies:

• Use standard HTML and JavaScript: Stick to HTML5 form attributes and modern JavaScript to ensure compatibility.
• Feature detection: Use feature detection libraries like Modernizr to check for browser capabilities.
• Polyfills: Implement polyfills for features not supported by older browsers.
• Normalize CSS: Use Normalize.css to standardize the appearance of HTML elements across browsers.
• Consistent event handling: Use addEventListener instead of attachEvent for event handlers.
• Cross-browser testing: Test forms thoroughly in all target browsers, including different versions.
• Progressive enhancement: Implement basic functionality first, then add enhancements for modern browsers.
• Use libraries: Leverage well-maintained libraries like jQuery Validation for cross-browser compatibility.

Here’s an example using Modernizr:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.11.2/modernizr.min.js"></script>
    <style>
        .no-js input:invalid, .no-js input:valid {
            border-color: transparent;
        }
        input:invalid {
            border-color: red;
        }
        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <button type="submit">Submit</button>
    </form>

    <script>
        if (Modernizr.inputtypes.email) {
            // Modern browsers with support for email input type
            document.getElementById('email').addEventListener('invalid', function(event) {
                event.target.setCustomValidity('Please enter a valid email address.');
            });

            document.getElementById('email').addEventListener('input', function(event) {
                if (event.target.validity.valid) {
                    event.target.setCustomValidity('');
                }
            });
        } else {
            // Fallback for browsers without support for email input type
            document.getElementById('myForm').addEventListener('submit', function(event) {
                const email = document.getElementById('email').value;
                const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!email || !emailPattern.test(email)) {
                    event.preventDefault();
                    alert('Please enter a valid email address.');
                }
            });
        }
    </script>
</body>
</html>

In this example, Modernizr is used to detect if the browser supports the email input type. If it does, the standard HTML5 validation is used. If not, fallback JavaScript validation is applied to ensure compatibility.

10. What security measures should be taken to prevent XSS and CSRF attacks in form validation?

Answer: Preventing Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF) attacks is crucial for securing web forms. Here are security measures to consider:

• Server-side validation: Always validate and sanitize input on the server side, regardless of client-side validation.
• Content Security Policy (CSP): Implement CSP headers to control which scripts can be executed.
• Entity encoding: Encode user input when displaying it back on the page to prevent XSS.
• Input sanitization: Use libraries like DOMPurify to sanitize user input.
• Use HTTPS: Ensure all communications are encrypted using HTTPS to prevent eavesdropping and interception.
• CSRF tokens: Use CSRF tokens to authenticate requests and ensure they are coming from a valid source.
• Limit form submissions: Implement rate limiting to prevent abuse.
• Secure cookies: Use secure and HttpOnly cookies to protect sensitive data.
• Input length checking: Limit the length of input fields to prevent buffer overflows.
• Regular security audits: Conduct regular security audits and penetration testing to identify vulnerabilities.

Here’s an example of implementing CSRF tokens:

HTML:

<form id="myForm" action="submitForm.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <input type="hidden" name="csrf_token" value="<?php echo generateCsrfToken(); ?>">
    <button type="submit">Submit</button>
</form>

PHP (generateCsrfToken.php):

<?php
function generateCsrfToken() {
    if (empty($_SESSION['csrf_token'])) {
        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
    }
    return $_SESSION['csrf_token'];
}

function validateCsrfToken($token) {
    if (empty($token) || strcmp($token, $_SESSION['csrf_token']) !== 0) {
        return false;
    }
    return true;
}
?>

PHP (submitForm.php):

<?php
session_start();

if (!validateCsrfToken($_POST['csrf_token'])) {
    http_response_code(403);
    echo 'Invalid CSRF token.';
    exit;
}

// Process form data
$username = $_POST['username'];
// Further validation and processing
?>

In this example, a CSRF token is generated and stored in the session. The token is included in the form as a hidden field. When the form is submitted, the server-side script checks if the submitted token matches the session token to validate the request.

By following these best practices and security measures, you can ensure that JavaScript form validation and user interaction in web designing are both user-friendly and secure.