https://technogemsinc.com/Components/News-update-component.js

1
2// ? Subscribe To Our Newsletter section in Home Page
3class NewsUpdateMail extends HTMLElement {
4    constructor() {
5        super();
6    }
7
8    connectedCallback() {
9        this.innerHTML = `
10        <!-- Signup section -->
11        <section class="signup section" id="signup">
12            <div class="container">
13                <div class="content_section reveal_left">
14                    <h2>Subscribe To Our Newsletter</h2>
15                    <p>Stay updated with latest technology trends and topic with us.</p>
16                </div>
17                <picture class="asset_section reveal_right">
18                    <img src="images/Subscribe-mail.svg" alt="Subscribe Mail" loading="lazy">
19                </picture>
20            </div>
21        </section>
22        `
23    }
24}
25
26customElements.define('news-update-component', NewsUpdateMail);
27
28function validateNewsInput() {
29    const newsEmailValue = document.getElementById("submail").value.trim();
30    const validEamil = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
31
32    if (newsEmailValue === '') {
33        $('.submail_error').addClass('hide_Sub_error').text("Please Enter Your Email Address");
34        $('#submail').css("border-color", '#ff2f2f');
35    } else if (!newsEmailValue.match(validEamil)) {
36        $('.submail_error').addClass('hide_Sub_error').text("Please Enter Valid Email Address");
37        $('#submail').css("border-color", '#ff2f2f');
38    } else {
39        $('.submail_error').removeClass('hide_Sub_error');
40        $('#submail').css("border-color", '#008000');
41    }
42}
43
44