DevTool-TypeError：“ stepUp”

Question

I'm new on ajax and i'm trying to make a signup page using AJAX, JQUERY and PHP. When i launch it, everything is fine, when i try to complete fields, still fine, errors popup if i make mistakes. But when all fields are fine without errors, when i presso submit nothing appears.

I saw a strange error in Firefox DevTool: TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement., but i can't understand what it means.

Here is the code:

$(function () {
    $("#form1").submit(function (e) {
       e.preventDefault();

       if ($("#name").val() === ""){
           $(".nameOutput").css('color', 'red').text("something");
       }

       if ($("#surname").val() === ""){
           $(".surnameOutput").css('color', 'red').text("something");
       }

       if ($("#username").val() === ""){
           $(".usernameOutput").css('color', 'red').text("something");
       }else if($("#username").val().length < 5){
           $(".usernameOutput").css('color', 'red').text("something");
           $('#username').val('');
       }

       if ($("#email").val() === ""){
           $(".emailOutput").css('color', 'red').text("something");
       }

       if ($("#psw").val() === "") {
           $(".pswOutput").css('color', 'red').text("something");
       }else if($("#psw").val().length < 8){
           $(".pswOutput").css('color', 'red').text("something");
           $('#psw').val('');
       }

       if (($("#username").val() !== "" && $("#username").val().length >= 5) && ($("#psw").val() !== "" && ($("#psw").val().length >= 8))){
           $.ajax({
               type: "GET",
               url: "../php/main.php",
               data: {
                   nameSignUp: $("#name").val(),
                   surnameSignUp: $("#surname"),
                   usernameSignUp: $("#username").val(),
                   emailSignUp: $("#email").val(),
                   passwordSignUp: md5($("#psw").val())
               },
               dataType: "text",
               success: function (e) {
                   if (e.trim() === 'YES'){
                       alert("something good");
                   }else if (e.trim() === 'NO'){
                       alert("something wrong");
                   }else{
                       alert("something something");
                   }
               }
           });
       }
   });
});

The fact is that i can't understand very well debug errors, because i don't speak english very well and i'm new on AJAX. I didn't see errors like this, so i don't know ho to fix the problem. Probably it's something easy, but not for me.

If you can help me it would be awesome. Tell me if i need to be more specific. Thank you in advance.

EDIT: This is the screen

Answer 1

.val() is missing here

surnameSignUp: $("#surname"),

this causes an error in jquery guts