Hinzufügen von CSS zu JQuery Validierungsfehlermeldungen

Question

Ich habe mein erstes Ajax-Formular (here) zusammengestellt, mit dem Ziel, die Formulardaten an eine MySQL-Datenbank zu senden. Ich habe minimale Erfahrung mit PHP und Javascript und habe deshalb JQuery Formwizard als meinen Pfad der Wahl angenommen. Das Formular funktioniert großartig, aber ich hatte nicht viel Glück, Ressourcen zu finden, die mir helfen, mein Skript 'process.php' zu schreiben.

Das Formular gibt standardmäßig eine Zeichenfolge wie item1 = foo & item2 = bar ... zurück, die beim Senden angezeigt wird. Ich habe das JS unten und den Kern meiner Datei process.php beigefügt, bin mir aber nicht sicher, wie die beiden miteinander verbunden sind. Die Schaltfläche "Senden" scheint sich nicht auf das Skript zu beziehen. Die Form ist ein bisschen lang, aber einfach, also habe ich nur ein paar davon hinzugefügt. Vielen Dank,

Mike

HTML (SNIPPET)

<form action="path/to/process-form.php" method="POST" id="demoForm" class="bbq"> 

       <div id="fieldWrapper"> 

        <span class="step" id="first"> 

         <span class="font_normal_07em_black">Manufacturer Information</span><br /> 

         <p class="section-desc"> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non est est. Quisque sit amet tellus nulla, 
         eget molestie velit. Morbi dapibus ornare purus eget ultrices. In et massa ac diam vulputate auctor. 
         Curabitur ut velit nisi, vel suscipit ligula. Donec non tellus id mauris ornare laoreet sed quis massa. 
         </p> 

         <br /> 

         <div class="clear-line"></div> 

         <br /> 

         <label for="manu_name">Manufacturer</label><br /> 
         <input class="input_field_12em" name="manu_name" id="manu_name" /><br /> 

         <label for="manu_web">Website</label><br /> 
         <input class="input_field_12em" name="manu_web" id="manu_web" value="http://" /><br /> 

         <label for="manu_email">Email</label><br /> 
         <input class="input_field_12em" name="manu_email" id="manu_email" /><br /> 

         <label for="manu_phone">Phone</label><br /> 
         <input class="input_field_12em" name="manu_phone" id="manu_phone" /> 
         <label for="manu_phone_ext">ext</label> 
         <input class="input_field_12em" name="manu_phone_ext" id="manu_phone_ext" /><br /> 

         <label for="manu_info">Additional Info</label><br /> 
         <textarea class="input_field_12em" name="manu_info" id="manu_info"></textarea><br /> 

        </span> 

... Fortsetzung

   <div id="demoNavigation">       
        <input class="navigation_button" id="back" value="Back" type="reset" /> 
        <input class="navigation_button" id="next" value="Next" type="submit" /> 
       </div> 

</form> 

JS

$(function(){ 
         $("#demoForm").formwizard({ 
          formPluginEnabled: true, 
          validationEnabled: true, 
          focusFirstInput : true, 
          formOptions :{ 
             type:'POST', 
           success: function(data){$("#status").fadeTo(5000,1,function(){ $(this).html("Product successfully submitted!").fadeTo(5000, 0); })}, 
           beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));}, 
           dataType: 'json', 
           resetForm: true 
          }, 
          validationOptions : { 
           rules: { 

           <!-- Manufacturer validation --> 

            manu_name: "required", 
            manu_email: { 
             email: true 
            }, 

           }, 
           messages: { 
            required: "This field is required.", 
            email: "Please enter a valid email address." 
           } 
           } 
          }); 
         }); 

PHP (Prozess-form.php)

<?php 

include('dbconnect.php'); 

/* manufacturer */ 

$manu_name = $_POST['manu_name']; 
$manu_web = $_POST['manu_web']; 
$manu_email  = $_POST['manu_email']; 
$manu_phone  = $_POST['manu_phone']; 
$manu_phone_ext = $_POST['manu_phone_ext']; 
$manu_info = $_POST['manu_info']; 

$manu_name = mysqli_real_escape_string($manu_name); 
$manu_web = mysqli_real_escape_string($manu_web); 
$manu_email  = mysqli_real_escape_string($manu_email); 
$manu_phone  = mysqli_real_escape_string($manu_phone); 
$manu_phone_ext = mysqli_real_escape_string($manu_phone_ext); 
$manu_info = mysqli_real_escape_string($manu_info); 

$query = "INSERT INTO pd_products 
     (manu_name,manu_web,manu_email,manu_phone,manu_phone_ext,manu_info) 
     VALUES ('$manu_name','$manu_web','$manu_email','$manu_phone','$manu_phone_ext','$manu_info')"; 

if (!mysqli_query($query,$con)) 
    { 
    die('Error: ' . mysqli_error()); 
    } 
mysqli_close($con) 

?> 

Answer 1

stellen Sie sicher, "form action =" ändern path/to/Prozess-form.php "" in der HTML auf den tatsächlichen Pfad, in dem Das Formular befindet sich.

mysqli_query ($ query, $ con) sollte mysqli_query ($ con, $ query) mit Link, sie abfragen. Warum nicht einfach mysql_query ($ query, $ con) verwenden?

Scheint wie Sie viel unnötigen Code verwenden, um etwas Einfaches zu tun.

Platzieren Sie den HTML- und PHP-Code in einer .php-Datei (stellen Sie sicher, dass PHP in geschweiften Klammern steht), ändern Sie die Formularaktion in einen eigenen Namen (um sich selbst zu übergeben) und entfernen Sie das Javascript.

prüfen für PHP Formular-Validierung: http://php.net/manual/en/filter.filters.validate.php