HTML Como fazer a validação de formulário?

RayanneRamos · 18 de novembro de 2018

Boa noite!

Estou fazendo um trabalho para a faculdade sobre uma agência de viagem e na parte de cadastrar o cliente precisa fazer a validação pode usar javascript ou jquery. Porém não tenho nenhuma ideia de como fazer isso.

 <form name="cadastro" action="#" method="post" id="form">
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <label for="seuNome">Nome:</label>
                                <input type="text" class="form-control" id="seuNome" placeholder="Nome" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuSobrenome">Sobrenome:</label>
                                <input type="text" class="form-control" id="seuSobrenome" placeholder="Sobrenome" required>
                            </div>
                            <div class="form-group col-sm-8">
                                <label for="seuEndereço">Endereço:</label>
                                <input type="text" class="form-control" id="seuEndereço" placeholder="Av.Paris, 54, Bonsucesso" required>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuData">Data de Nascimento:</label>
                                <input type="text" class="form-control" id="seuData" placeholder="DD/MM/AAAA" required>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCidade">Cidade:</label>
                                <input type="text" class="form-control" id="seuCidade" placeholder="Cidade" required>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCEP">CEP:</label>
                                <input type="text" class="form-control" id="seuCEP" placeholder="00000-000" required>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuEstado">Estado:</label>
                                <select id="seuEstado" class="form-control" required>
                                    <option selected>Estado</option>
                                    <option>SP</option>
                                    <option>RJ</option>
                                    <option>MG</option>
                                    <option>ES</option>
                                    <option>PR</option>
                                    <option>SC</option>
                                    <option>RS</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuEmail">Email:</label>
                                <input type="text" class="form-control" id="seuEmail" placeholder="[email protected]" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="seuSenha">Senha:</label>
                                <input type="password" class="form-control" id="seuSenha" placeholder="Senha" required>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCartao">Cartão de Crédito:</label>
                                <input type="text" class="form-control" id="seuCartao" placeholder="0000-0000-0000-0000" required>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuBandeira">Bandeira do Cartão</label>
                                <select id="seuBandeira" class="form-control" required>
                                    <option selected>Escolha</option>
                                    <option>Mastecard</option>
                                    <option>Visa</option>
                                    <option>American Expresss</option>
                                    <option>Elo</option>
                                    <option>Sodexo</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="seuCS">Código de Segurança</label>
                                <input type="text" class="form-control" id="seuCS" placeholder="000" required>
                            </div>
                            <div class="form-group col-sm-12">
                                <button type="submit" class="btn btn-outline-dark btn-lg btn-block">Cadastrar-se</button> 
                            </div>
                        </div>
                    </form>