Construir um formulário de reclamação de cliente

Instruções

Construir um formulário de reclamação de cliente

Para este laboratório, você recebeu todo o HTML e CSS. Você usará JavaScript para validar o formulário de reclamação. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de usuário: 1. Quando o formulário for enviado, você deve garantir que:

#full-name não está vazio.
#email é um formato válido de endereço de e-mail.
#order-no é uma sequência de dez números começando com 2024.
#product-code segue o padrão XX##-X###-XX#, onde X representa uma letra minúscula ou uma letra maiúscula e # representa um número.
#quantity é um número inteiro positivo.
pelo menos uma caixa de seleção de #complaints-group está marcada.
#complaint-description contém pelo menos vinte caracteres se a caixa de seleção Other estiver marcada.
um botão de opção de #solutions-group está selecionado.
#solution-description contém pelo menos vinte caracteres se o botão de opção Other estiver selecionado.

1. Você deve ter uma função chamada validateForm que retorna um objeto contendo as seguintes chaves: full-name, email, order-no, product-code, quantity, complaints-group, complaint-description, solutions-group e solution-description. O valor de cada chave deve ser true se o campo do formulário correspondente estiver preenchido corretamente e false caso contrário. Os campos condicionais de descrição devem ser true quando não forem necessários e, caso contrário, validados com base em conterem pelo menos vinte caracteres. 1. Você deve ter uma função chamada isValid que recebe o objeto retornado por validateForm como argumento e retorna true se todos os campos do formulário estiverem corretamente preenchidos e false caso contrário. 1. Se um evento de alteração for acionado em um campo de formulário e ele tiver um valor válido, você deve definir a cor da borda para green. No caso de grupos de caixas de seleção e botões de opção, você deve definir a cor da borda do fieldset pai. 1. Se um evento de alteração for acionado em um campo de formulário e ele contiver um valor inválido, você deve definir a cor da borda para red. No caso de grupos de checkbox e radio button, você deve definir a cor da borda do fieldset pai. 1. Quando você tentar enviar o formulário, deve chamar isValid para validar o formulário. 1. Quando você tentar enviar o formulário, se o formulário tiver algum campo inválido, cada campo inválido deve ser destacado definindo a cor da borda de cada input, textarea ou fieldset inválido (no caso de grupos de checkbox e radio button) para red.

O que fazer:

Testes:

Você deve ter uma função chamada `validateForm`.
`validateForm` deve retornar um objeto.
`validateForm()["full-name"]` deve ser `false` quando `#full-name` estiver vazio, e `true` caso contrário.
Quando um evento `change` for acionado em `#full-name`, você deve definir a cor da borda para `green` se ele contiver um valor válido, e para `red` caso contrário.
`validateForm()["email"]` deve ser `true` quando `#email` contiver um endereço de e-mail válido, e `false` caso contrário.
Quando um evento `change` é acionado em `#email`, você deve definir a cor da borda para `green` se ele contiver um endereço de e-mail válido, e para `red` caso contrário.
`validateForm()["order-no"]` deve ser `true` quando `#order-no` contiver um valor válido, e `false` caso contrário.
Quando um evento `change` é acionado em `#order-no`, você deve definir a cor da borda para `green` se ele contiver um valor válido, e para `red` caso contrário.
`validateForm()["product-code"]` deve ser `true` quando `#product-code` contiver um valor válido, e `false` caso contrário.
Quando um evento `change` é acionado em `#product-code`, você deve definir a cor da borda para `green` se ele contiver um valor válido, e para `red` caso contrário.
`validateForm()["quantity"]` deve ser `true` quando `#quantity` contiver um valor válido, e `false` caso contrário.
Quando um evento `change` é acionado em `#quantity`, você deve definir a cor da borda para `green` se ele contiver um valor válido, e para `red` caso contrário.
Quando pelo menos uma caixa de seleção de `#complaints-group` estiver marcada, `validateForm()["complaints-group"]` deve ser `true`.
Quando nenhuma das caixas de seleção de `#complaints-group` estiver marcada, `validateForm()["complaints-group"]` deve ser `false`.
Uma vez que uma caixa de seleção de `#complaints-group` esteja marcada, você deve definir a cor da borda de `#complaints-group` para `green`.
Quando todas as caixas de seleção de `#complaints-group` forem alteradas para o estado desmarcado, você deve definir a cor da borda de `#complaints-group` para `red`.
Quando `#other-complaint` não estiver marcado, `validateForm()["complaint-description"]` deve ser `true`.
Quando `#other-complaint` estiver marcado e `#complaint-description` contiver pelo menos vinte caracteres, `validateForm()["complaint-description"]` deve ser `true`.
Quando `#other-complaint` estiver marcado e `#complaint-description` contiver menos de vinte caracteres, `validateForm()["complaint-description"]` deve ser `false`.
Quando `#other-complaint` estiver marcado e o valor de `#complaint-description` for alterado para um valor válido, você deve definir a cor da borda como `green`.
Quando `#other-complaint` estiver marcado e o valor de `#complaint-description` for alterado para um valor inválido, você deve definir a cor da borda como `red`.
Quando um botão de opção de `#solutions-group` estiver selecionado, `validateForm()["solutions-group"]` deve ser `true`.
Quando nenhum dos botões de opção de `#solutions-group` estiver selecionado, `validateForm()["solutions-group"]` deve ser `false`.
Uma vez que um botão de rádio de `#solutions-group` seja selecionado, você deve definir a cor da borda de `#solutions-group` para `green`.
Quando todos os botões de rádio de `#solutions-group` estiverem no estado desmarcado após um evento de alteração, você deve definir a cor da borda de `#solutions-group` para `red`.
Quando `#other-solution` não estiver marcado, `validateForm()["solution-description"]` deve ser `true`.
Quando `#other-solution` estiver marcado e `#solution-description` contiver pelo menos vinte caracteres, `validateForm()["solution-description"]` deve ser `true`.
Quando `#other-solution` estiver marcado e `#solution-description` contiver menos de vinte caracteres, `validateForm()["solution-description"]` deve ser `false`.
Quando `#other-solution` estiver marcado e o valor de `#solution-description` for alterado para um valor válido, você deve definir a cor da borda para `green`.
Quando `#other-solution` estiver marcado e o valor de `#solution-description` for alterado para um valor inválido, você deve definir a cor da borda como `red`.
Você deve ter uma função chamada `isValid`.
Sua função `isValid` deve receber a `validateForm()` como argumento e retornar `true` quando todos os campos do formulário estiverem preenchidos corretamente.
Sua função `isValid` deve receber a `validateForm()` como argumento e retornar `false` quando nem todos os campos do formulário tiverem sido preenchidos corretamente.
Você deve chamar `isValid` quando tentar enviar o formulário.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Customer Complaint Form</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Complaint Form</h1>
    <form id="form">
        <fieldset id="personal-info">
            <div>
                <label for="full-name">Full Name:</label>
                <input type="text" id="full-name" name="full-name" placeholder="John Doe">
            </div>

            <div>
                <label for="email">Email Address:</label>
                <input type="email" id="email" name="email" placeholder="example@domain.com">
            </div>
        </fieldset>
        <hr>
        <fieldset id="product-info">
            <div>
                <label for="order-no">Order No:</label>
                <input type="text" id="order-no" name="order-no" placeholder="2024######">
            </div>
            <div>
                <label for="product-code">Product Code:</label>
                <input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
            </div>
            <div>
                <label for="quantity">Quantity:</label>
                <input type="number" id="quantity" name="quantity" min="1">
            </div>
        </fieldset>

        <fieldset id="complaints-group">
            <legend>Complaint Reason:</legend>
            <div>
                <input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
                <label for="damaged-product">Damaged Product</label>
            </div>

            <div>
                <input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
                <label for="nonconforming-product">Nonconforming Product</label>
            </div>

            <div>
                <input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
                <label for="delayed-dispatch">Delayed Dispatch</label>
            </div>

            <div>
                <input type="checkbox" id="other-complaint" name="complaint" value="other">
                <label for="other-complaint">Other</label>
            </div>
        </fieldset>

        <fieldset id="complaint-description-container">
            <legend>Description of Complaint Reason</legend>
            <textarea placeholder="Describe the reason of your complaint in at least 20 characters"
                name="complaint-textarea" id="complaint-description"></textarea>
        </fieldset>

        <fieldset id="solutions-group">
            <legend>Desired Solution</legend>
            <input type="radio" name="solutions" id="refund" value="refund">
            <label for="refund">Refund</label>

            <input type="radio" name="solutions" id="exchange" value="exchange">
            <label for="exchange">Exchange</label>

            <input type="radio" name="solutions" id="other-solution" value="other">
            <label for="other-solution">Other</label>
        </fieldset>

        <fieldset id="solution-description-container">
            <legend>Description of Desired Solution</legend>
            <textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
                name="solution-textarea" id="solution-description"></textarea>
        </fieldset>
        <div id="btn-container">
            <button type="submit" id="submit-btn">Submit</button>
            <span id="message-box" aria-live="polite"></span>
        </div>

    </form>

    <script src="script.js"></script>
</body>

</html>

* {
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

#form {
    max-width: 70%;
    margin: auto;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 10px;
}

input {
    border-color: rgb(118, 118, 118);
}

#personal-info input, #product-info input {
    width: 100%;
    margin-bottom: 10px;
}


fieldset {
    margin-bottom: 10px;
    border-radius: 5px;
    border-color: rgb(118, 118, 118);
}

textarea {
    width: 100%;
    border-color: rgb(118, 118, 118);
}

#btn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#submit-btn, #clear-btn {
    margin: 10px 15px 0;
}

Preview