Doubt , how to resolve this conflict?

Question

I have the following scripts , one for validation and one for sending to php :

$(document).ready(function(){
    $("input,textarea").blur(function(){
     if($(this).val() == "")
         {
             $(this).css({"border" : "1px solid #F00", "padding": "2px"});
         }
    });
    $("#butEnviar").click(function(){
     var cont = 0;
     $("#form input,textarea").each(function(){
         if($(this).val() == "")
             {
                 $(this).css({"border" : "1px solid #F00", "padding": "2px"});
                 cont++;
             }
        });
     if(cont == 0)
         {
             $("#form").submit();
         }
    });
});

This is for validation

$(document).ready(function() {
$("#butEnviar").click(function() {
    var nome  = $("input[name=nome]").val();
    var email =  $("input[name=email]").val();
    var telefone =  $("input[name=telefone]").val();
    var assunto = $("input[name=assunto]").val();
    var msg =  $("textarea[name=msg]").val();
    $.ajax({
        "url": "enviar.php",
        "dataType": "html",
        "data": {
            "nome" : nome,
            "email":email ,
            "telefone": telefone,
            "assunto": assunto,
            "msg" : msg
        },
        "success": function(response) {
            $("div#saida").html(response);
            $("#reset").click();

        }

And this one for shipping. But I think it’s giving conflict and is not sending the data to enviar.php, what should I do?

Answer 1

Your flow is wrong because you are submitting via HTML and not via Javascript/Ajax. I can imagine by your Ajax code that you want to send via Javascript and not do form Ubmit via HTML (which loads the page again).

To submit via Ajax you must capture the event submit form and stop it. Only with it canceled can you send the data to Ajax. For this changes

in the assessment code

$("#butEnviar").click(function(){

adds

$("#butEnviar").click(function(){
    e.preventDefault(); // para parar o submit

And in the code where you have Ajax changes

$("#butEnviar").click(function() {

for the event you will listen to to intercept the event you fire with $("#form").submit();. Thus changes

$("#form").on('submit', function(e) {
    e.preventDefault();

You can also make some improvements to your code, with less jQuery and no repetitions like this:

Appraisal:

$(document).ready(function() {
    function uiWarning() {
        return this.classList.toggle('incomplete', this.value == '');
    }
    $("input,textarea").blur(uiWarning);
    $("#butEnviar").click(function(e) {
        e.preventDefault();
        var cont = 0;
        var falhados = $("#form input,textarea").filter(uiWarning);
        if (falhados.length == 0) $("#form").submit();
    });
});

in the part of Ubmit:

$(document).ready(function() {
    $("#form").on('submit', function(e) {
        e.preventDefault();
        var data = {};
        ['nome', 'email', 'telefone', 'assunto', 'msg'].forEach(function(name) {
            data[name] = document.querySelector('[name="' + name + '"]').value;
        });

        $.ajax({
            "url": "enviar.php",
            "dataType": "html",
            "data": data,
            "success": function(response) {
                $("div#saida").html(response);
                $("#reset").click();
            }
        });
    });
});

Answer 2

Tip: Use the required html property for validations. It will greatly decrease this code, increasing readability.

<input type="text" required="required" name="name" />

It is possible to style inputs using pseudo classes:

input:required:invalid {}
input:required:valid {}

Source: See Here