javascript required formular

      function selectStep(n) {
         if(n == 1) {
            $(".progress-selected").animate({marginLeft: "0px"}, 300);
         }else if(n == 2){
            $(".progress-selected").animate({marginLeft: "70px"}, 300);
         }else if(n == 3){
            $(".progress-selected").animate({marginLeft: "140px"}, 300);
         }else if(n == 4){
            $(".progress-selected").animate({marginLeft: "210px"}, 300);
         }else if(n == 5){
            $(".progress-selected").animate({marginLeft: "280px"}, 300);
         }else if(n == 6){
            $(".progress-selected").animate({marginLeft: "350px"}, 300);
         }else if(n == 7){
            $(".progress-selected").animate({marginLeft: "420px"}, 300);
         }         
         $(".content-switcher").hide();
         $("#content"+n).show().addClass("animated flipInY");

         $(".next").hide();
         $("#a"+n).show();

         $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function() {
            });
        });
      }



<form id="myForm" name="myForm" action="formular.php" onsubmit="return validateForm()" method="post">
   <div class="content-switcher" id="content2">
      <div class="forms">
         <label class="slide01" id="slide1">
            Meno<br>
            <input type="text" class="slide01" name="name" id="name" required>
         </label>
         <label class="slide01" id="slide1">
            Priezvisko<br>
            <input type="text" class="slide01" name="priezvisko" required>
         </label>
         <label class="slide01" id="slide1">
            Email<br>
            <input type="text" class="slide01" name="email">
         </label>
         <label class="slide01" id="slide1">
            Trieda<br>
            <input type="text" class="slide01" name="trieda">
         </label>
         <label class="slide01" id="slide1">
            Skola<br>
            <input type="text" class="slide01" name="skola">
         </label>
      </div>
   </div>
<input type="image" class="next" src="img/next.png" onclick="selectStep(3); return true" id="a2">
</form>

function validateForm() {
          var x = document.forms["myForm"]["meno"].value;
          if ( x === undefined ||x == null || x == "") {
              alert("Name must be filled out");
              return false;
          }
          var radios = document.getElementsByName("q2");
          var formValid = false;
          var i = 0;
          while (!formValid && i < radios.length) {
             if (radios[i].checked) formValid = true;
             i++;       
          }
          if (!formValid) alert("Must check some option!");
          return formValid;
      }

      $(document).ready(function() {
         // bind form using ajaxForm
         $('#myForm').ajaxForm( { beforeSubmit: validate } );
      });
      function validate(formData, jqForm, options) {

    var form = jqForm[0];
    if (!form.username.value || !form.password.value) {
        alert('Please enter a value for both Username and Password');
        return false;
    }
    function selectStep(n) {

         if(n == 1) {
            $(".progress-selected").animate({marginLeft: "0px"}, 300);
         }else if(n == 2){
            $(".progress-selected").animate({marginLeft: "70px"}, 300);
         }else if(n == 3){
            $(".progress-selected").animate({marginLeft: "140px"}, 300);
         }else if(n == 4){
            $(".progress-selected").animate({marginLeft: "210px"}, 300);
         }else if(n == 5){
            $(".progress-selected").animate({marginLeft: "280px"}, 300);
         }else if(n == 6){
            $(".progress-selected").animate({marginLeft: "350px"}, 300);
         }else if(n == 7){
            $(".progress-selected").animate({marginLeft: "420px"}, 300);
         }         
         $(".content-switcher").hide();
         $("#content"+n).show().addClass("animated flipInY");

         $(".next").hide();
         $("#a"+n).show();

      }
}