it-swarm.com.de

So erzwingen Sie eine html5-Formularüberprüfung, ohne sie über jQuery zu senden

Ich habe dieses Formular in meiner App und werde es über AJAX einreichen, aber ich möchte HTML5 für die clientseitige Überprüfung verwenden. Ich möchte also die Formularvalidierung erzwingen können, vielleicht über jQuery.

Ich möchte die Validierung auslösen, ohne das Formular zu senden. Ist es möglich?

229
razenha

Um zu prüfen, ob ein bestimmtes Feld gültig ist, verwenden Sie:

$('#myField')[0].checkValidity(); // returns true/false

Um zu überprüfen, ob das Formular gültig ist, verwenden Sie:

$('#myForm')[0].checkValidity(); // returns true/false

Wenn Sie die systemeigenen Fehlermeldungen einiger Browser anzeigen möchten (z. B. Chrome), können Sie das leider nur durch Senden des Formulars wie folgt tun:

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

Hoffe das hilft. Beachten Sie, dass die HTML5-Überprüfung nicht in allen Browsern unterstützt wird.

372
Abraham

Ich fand diese Lösung für mich zu arbeiten. Rufen Sie einfach eine Javascript-Funktion wie folgt auf:

action="javascript:myFunction();"

Dann hast du die HTML5-Validierung ... ganz einfach :-)

24

Hier ist ein allgemeiner Weg, der etwas sauberer ist:

Erstellen Sie Ihr Formular wie folgt (kann ein Dummy-Formular sein, das nichts bewirkt):

<form class="validateDontSubmit">
...

Binden Sie alle Formulare, die Sie nicht wirklich einreichen möchten:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Nehmen wir an, Sie haben einen <a> (innerhalb des <form>), den Sie beim Klicken auf das Formular überprüfen möchten:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Einige Anmerkungen hier:

  • Mir ist aufgefallen, dass Sie das Formular nicht wirklich abschicken müssen, damit die Validierung erfolgt - der Aufruf von checkValidity() reicht aus (zumindest in Chrom). Wenn andere Kommentare zum Testen dieser Theorie in anderen Browsern hinzufügen könnten, werde ich diese Antwort aktualisieren.
  • Die Sache, die die Validierung auslöst, muss nicht im <form> sein. Dies war nur eine saubere und flexible Möglichkeit, eine Allzwecklösung zu haben.
14
rynop
    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

von: html5 Formularvalidierung

9
user1575761

Vielleicht ist die Party zu spät, aber irgendwie habe ich diese Frage gefunden, als ich versuchte, ein ähnliches Problem zu lösen. Da kein Code von dieser Seite für mich funktioniert hat, habe ich inzwischen eine Lösung gefunden, die wie angegeben funktioniert.

Das Problem ist, wenn Ihr <form>-DOM ein einzelnes <button>-Element enthält, sobald es ausgelöst wurde, dass <button> das Formular automatisch absetzt. Wenn Sie mit AJAX spielen, müssen Sie wahrscheinlich die Standardaktion verhindern. Es gibt jedoch einen Haken: Wenn Sie dies tun, verhindern Sie auch die grundlegende HTML5-Überprüfung. Daher ist es sinnvoll, die Standardeinstellungen für diese Schaltfläche nur dann zu verhindern, wenn das Formular gültig ist. Andernfalls schützt Sie die HTML5-Validierung vor dem Absenden. jQuery checkValidity() hilft dabei:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

Mit dem oben beschriebenen Code können Sie die grundlegende HTML5-Validierung (mit Typ- und Musterabgleich) OHNE Formular verwenden.

9
vzr

Sie sprechen von zwei verschiedenen Aspekten "HTML5-Validierung" und der Validierung von HTML-Formularen mit Javascript/Jquery. 

HTML5 "hat" integrierte Optionen zum Überprüfen eines Formulars. B. die Verwendung des Attributs "required" für ein Feld, das (basierend auf der Browserimplementierung) die Formularübergabe ohne Javascript/jquery fehlschlagen kann.

Mit javascrip/jquery können Sie so etwas tun

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});
5
Peter Pajchl

Sie benötigen keine jQuery, um dies zu erreichen. In Ihrem Formular hinzufügen:

onsubmit="return buttonSubmit(this)

oder in JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

In Ihrer buttonSubmit-Funktion (oder wie auch immer Sie sie aufrufen) können Sie das Formular mit AJAX absenden. buttonSubmit wird nur aufgerufen, wenn Ihr Formular in HTML5 überprüft wird.

Falls dies jemandem hilft, ist hier meine buttonSubmit-Funktion:

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Einige meiner Formulare enthalten mehrere Übergabeschaltflächen, daher diese Zeile if (submitvalue == e.elements[i].value). Ich setze den Wert von submitvalue mit einem Klickereignis.

3
Dan Bray
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}
3
Rafik malek

Ich hatte eine ziemlich komplexe Situation, in der ich mehrere Submit-Buttons brauchte, um verschiedene Dinge zu verarbeiten. Zum Beispiel Speichern und Löschen. 

Die Basis war, dass es auch unauffällig war, so dass ich es nicht einfach zu einem normalen Knopf machen konnte. Wollte aber auch die HTML5-Validierung nutzen.

Das Submit-Ereignis wurde ebenfalls überschrieben, falls der Benutzer die Eingabetaste gedrückt hat, um die erwartete Standardübergabe auszulösen. in diesem Beispiel speichern.

Hier ist das Bestreben der Verarbeitung des Formulars, mit/ohne Javascript und mit HTML5-Validierung zu arbeiten, sowohl mit Senden als auch mit Klickereignissen.

jsFiddle Demo - HTML5-Validierung mit Senden und Klicken überschreibt

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Der Nachteil bei der Verwendung von Javascript besteht darin, dass der Onclick des Browsers standardmäßig auf das Submit-Ereignis übertragen werden MUSS, damit die Fehlernachrichten angezeigt werden, ohne dass jeder Browser in Ihrem Code unterstützt wird .. Wenn das Click-Ereignis mit event.preventDefault () überschrieben wird. oder false zurückgeben, wird es niemals an das submit-Ereignis des Browsers weitergegeben.

Die Sache ist darauf hinzuweisen, dass in einigen Browsern das Formular nicht gesendet wird, wenn der Benutzer die Eingabetaste drückt, sondern die erste Schaltfläche zum Senden des Formulars. Daher gibt es eine console.log ('form submit'), die zeigt, dass sie nicht ausgelöst wird.

2
fyrye

Sie können es auch ohne das Formular absenden.

Wenn sich zum Beispiel die Formularsendeschaltfläche mit der ID "Suchen" in dem anderen Formular befindet. Sie können das click -Ereignis auf dem Submit-Button aufrufen und anschließend ev.preventDefault aufrufen. Für meinen Fall validiere ich Formular B aus Formular A, Vorlage

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}
2
zawhtut

Um alle erforderlichen Felder des Formulars zu überprüfen, ohne die Schaltfläche "Senden" zu verwenden, können Sie die unten stehende Funktion verwenden.

Sie müssen den Steuerelementen required attribut zuordnen.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });
2
Trusha Soni

der folgende Code funktioniert für mich:

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

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});
1

Dies funktionierte von Form zu Anzeige der nativen HTML 5-Fehlernachrichten mit Formularüberprüfung.

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Hinweis: RegForm ist der form id.

Referenz

Hoffnung hilft jemandem.

1
stom

Dies ist eine recht einfache Möglichkeit, HTML5 für jedes Formular eine Validierung durchführen zu lassen, während moderne JS das Formular dennoch kontrollieren können. Der einzige Nachteil ist, dass der Submit-Button im <form> sein muss.

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}
1
Aaron

Ich weiß, dass dies bereits beantwortet wurde, aber ich habe eine andere mögliche Lösung.

Wenn Sie Jquery verwenden, können Sie dies tun.

Erstellen Sie zunächst einige Erweiterungen für Jquery, damit Sie diese bei Bedarf erneut verwenden können.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Machen Sie als Nächstes etwas, wo Sie es verwenden möchten.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>
1
David Thompson
$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});
1

Entsprechend der Frage sollte die Gültigkeit von html5 zunächst mit jQuery validiert werden können, und in den meisten Antworten geschieht dies nicht, und der Grund dafür ist folgender:

während der Validierung mit der Standardfunktion des HTML5-Formulars

checkValidity();// returns true/false

wir müssen verstehen, dass jQuery ein Objektarray zurückgibt, wenn Sie wie folgt auswählen

$("#myForm")

daher müssen Sie den ersten Index angeben, damit die Funktion checkValidity () funktioniert

$('#myForm')[0].checkValidity()

hier ist die Komplettlösung:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}
0
justnajm
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" href="assets/css/style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script src="scripts/app.js"></script>
</head>

<body>
    <div class="container">
    <div class="row">
        <label><input type="radio" id="click_radio" value="click">click</label>
    </div>
    <div class="row">
        <div class="col-md-8" id="person_form">
            <form>
                <fieldset>
                    <p><strong>pick your colour</strong></p>
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label>color</label>
                            <select class="form-control" id="list1"></select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>sports</label>
                            <select class="form-control" id="list2"></select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label>books</label>
                            <select class="form-control" id="list3"></select>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6" >
                            <label class="col-md-12">name</label>
                            <input type="text" class="col-md-12 form-control" id="name">
                             <p id="nameerror"> This field is required</p>
                        </div>
                        <div class="col-md-6">
                            <label>phone number</label>
                            <input type="text" class="col-md-12 form-control" id="numb">
                        </div>
                    </div>
                    <div class="row">
                        <button class="btn btn-success pull-right" id="submit" type="submit">go to code</buttn>
                    </div>
                </fieldset>
            </form>

        </div>
        <div class="row second">
              <div class="col-md-12">
                  <div class="row">
                      <div class="col-md-6">
                          <ul id="draglist"  class="list-unstyled">

                          </ul>
                      </div>
                      <div class="col-md-6">
                          <ul id="droplist" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">

                          </ul>
                      </div>
                  </div>
              </div>
              <div class="col-md-12">
                  <div class="row">
                      <div class="col-md-6"></div>
                      <div class="col-md-6">
                          <button class="btn btn-success pull-right" id="submitList">Submit</button>
                      </div>
                  </div>
              </div>
          <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog">
             <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                  </div>
                  <div class="modal-body">
                    <p>You have successfully completed the application!!!</p>
                  </div>
                  <div class="modal-footer footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

              </div>
            </div>
          </div>
        <div class="col-md-4 pull-right">
            <h1>Benefits</h1>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
                <li>item 5</li>
            </ul>
        </div>

    </div>

</div>
</body>
</html>
0
Anonymous

Dieser Weg funktioniert gut für mich:

  1. Fügen Sie das onSubmit-Attribut in Ihre form ein. Vergessen Sie nicht, return in den Wert aufzunehmen.

    <form id='frm-contact' method='POST' action='' onSubmit="return contact()">
    
  2. Definieren Sie die Funktion.

    function contact(params) {
        $.ajax({
            url: 'sendmail.php',
            type: "POST",
            dataType: "json",
            timeout: 5000,
            data: { params:params },
            success: function (data, textStatus, jqXHR) {
                // callback
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.responseText);
            }
        });
    
        return false;
    }
    
0
Jeaf Gilbert

Ich denke der beste Ansatz

wird das Plugin jQuery Validation verwenden, das bewährte Methoden für die Formularvalidierung verwendet und auch eine gute Browserunterstützung bietet. Sie müssen sich also nicht um Probleme mit der Browserkompatibilität kümmern.

Und wir können die Funktion jQuery validation valid () verwenden, die überprüft, ob das ausgewählte Formular gültig ist oder ob alle ausgewählten Elemente gültig sind, ohne das Formular abzusenden.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>
0
طلحة
<!DOCTYPE html>
<html>

<head>
                <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
                <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
                <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
                <title></title>
                <style>
                                .div{
                                width:100px;
                                height:100px;
                                border:1px solid black;
                                }
                                #div1{
                                width:20px;
                                height:20px;
                                background: red;
                                }
                                #div2{
                                width:20px;
                                height:20px;
                                background: blue;
                                }
                                #div3{
                                width:20px;
                                height:20px;
                                background: black;
                                }
                </style>
                                <script> 
                                var initial="";      
                                function allowDrop(e)
                                {
                                                e.preventDefault();
                                }
                                function drag(e){
                                                e.dataTransfer.setData("div",e.target.id);
                                }
                                function drop(e)
                                {                                              
                                                e.preventDefault();
                                                var data = e.dataTransfer.getData("div");
                                                if(initial=="")
                                                {
                                                initial = $("#"+data);
                                                e.target.appendChild($("#"+data)[0]);
                                                }else{
                                                $("#draghere").append(initial);
                                                e.target.appendChild($("#"+data)[0]);
                                                initial = $("#"+data);
                                                }
                                }
  //                                function drop(e)
  //                               { 
  // e.preventDefault();
  // var data = e.dataTransfer.getData("div");
  // e.target.appendChild($("#"+data)[0]);
  //                                }
                                $(document).ready(function(){

                                });
                </script>
</head>

<body>
                <div class="div" id="draghere" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div class="item" id="div1" draggable="true" ondragstart="drag(event)">
                </div>
        <!--         <div class="item" id="div2" draggable="true" ondragstart="drag(event)">
                </div>
                <div class="item" id="div3" draggable="true" ondragstart="drag(event)">
                </div> -->
                </div>   
                <div class="div" id="draghere1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>  
                <input type="text" name="asfa" id="tt" maxlength="10" onkeypress="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45" onpaste="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45">
</body>

</html>
0
Anonymous
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

keine beste Antwort, funktioniert aber für mich.

0
Keyrr Perino
$(document).ready(function () {
    var obj = {};
    $("#click_radio").click(function () {
        //Function to get the dropdown list using AJAX
        $.ajax({
            type: "get",
            url: "json/droplist1.json",
            dataType: "json",
            success: function (res) {
                populateDropDown1(res)
            }
        })
        $.ajax({
            type: "get",
            url: "json/droplist2.json",
            dataType: "json",
            success: function (res) {
                populateDropDown2(res)
            }
        })
        $.ajax({
            type: "get",
            url: "json/droplist3.json",
            dataType: "json",
            success: function (res) {
                populateDropDown3(res)
            }
        })
        //Internal function to populate the dropdown list
        function populateDropDown1(data) {
            $.each(data, function (index, val) {
                $("#list1").append('<option key=' + val.key + '>' + val.value + '</option>');
            });
        }
        function populateDropDown2(data) {
            $.each(data, function (index, val) {
                $("#list2").append('<option key=' + val.key + '>' + val.value + '</option>');
            });
        }
        function populateDropDown3(data) {
            $.each(data, function (index, val) {
                $("#list3").append('<option key=' + val.key + '>' + val.value + '</option>');
            });
        }
        $('#person_form').show();
    })

    $("#submit").click(function (e) {
        e.preventDefault();
        var namefl = 0, numbf = 0;
        var namef = $("#name").val();
        var phnenumb = $("#numb").val();
        var list11 = $("#list1").val();
        var list12 = $("#list2").val();
        var list13 = $("#list3").val();


        localStorage.setItem('name', $("#name").val());
        localStorage.setItem('number', $("#numb").val());
        localStorage.setItem('list11', $("#list1").val());
        localStorage.setItem('list12', $("#list2").val());
        localStorage.setItem('list13', $("#list3").val());
        if (namef.length < 2 || namef.length > 15) {
            $("#nameerror").show();
            namefl = 0;
        }
        else {
            namefl = 1;
            $("#nameerror").hide();
        }
        //    if(phnenumb.length<10 || phnenumb.isNaN()){ 
        //       $("#name").addClass('error');  
        //   }
        //   else{
        //       $("#name").removeClass('error'); 
        //   }
        if (namefl == 1) {
            $("#person_form").load("partials.html");
        }

        $.ajax({
            type: "get",
            dataType: "json",
            url: "json/drag_droplist.json",
            success: function (res) {
                populateSecondPageList(res);
            }
        })


    })
    //populate data in the first list box
    function populateSecondPageList(result) {
        $.each(result, function (index, value) {
            $("#draglist").append('<li draggable="true" ondragstart="drag(event)" id="drag' + index + '" class="list-item"><span class="key">' + value.key + ' </span><span class="value">' + value.value + '</span></li>');
        })

    }

    $(document).on("click", "#submitList", function () {
        var namef = localStorage.getItem('name');
        var numb = localStorage.getItem('number');
        var list1f = localStorage.getItem('list11');
        var list2f = localStorage.getItem('list12');
        var list3f = localStorage.getItem('list13');
        var dropname = localStorage.setItem('drpval', sampleData.value);
        var dropnam = localStorage.getItem('drpval');
        var obj = { namef, numb, list1f, list2f, list3f, dropnam };
        console.log(obj);
        $.ajax({
            type: "POST",
            data: obj,
            dataType: "json",
            url: "https://reqres.in/api/users",
            success: function (result) {

                $("#myModal").modal('show');
                $('#myModal .modal-body').html("<p>" + obj.namef + "</p> <p> " + obj.numb + "</p><p>" + obj.list1f + "</p><p>" + obj.list2f + "</p><p>" + obj.list3f + "</p><p>" + obj.dropnam + "</p>");

            },
            error: function (result) {
                alert('error');
                console.log(result);
            }
        });
    })

});


//drag and drop
var dragleave = "";
var sampleData = {};
function allowDrop(ev) {
    ev.preventDefault();
    ev.target.innerHTML = "";
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    $(".list-unstyled li").css("display", "block");
    ev.preventDefault();
    // console.log(ev.target);
    var data = ev.dataTransfer.getData("text");
    // console.log(document.getElementById(data));
    ev.target.innerHTML = document.getElementById(data).innerHTML;

    $(".list-unstyled #" + data).css("display", "none");
    //console.log($("#"+data).html());  

    if ($("#" + data).html()) {
        sampleData = { "key": $("#" + data + " .key").html(), "value": $("#" + data + " .value").html() };
    }
}
0
Anonymous