chef1568
Mar 09, 2015, updated at 18:39:34 (UTC)
view1810
view4
0
Goto Top

Livevalidierung durch Javascript (Submit nach LV invalid deaktiviert)

GermansolvedQuestionJavaScriptDevelopment
Hallo zusammen,

ich nutze für die Validierung der Formularfelder auf einer Homepagen die Livevalidation von http://livevalidation.com.
Die Livevalidierung funktioniert auch wie gewünscht. Wenn alle Felder "valide" sind kann ich das Formular auch absenden.

Allerdings habe ich das Problem, dass wenn mindestens noch ein Feld noch "LV_invalid" ist und ich das Formular mittels dem "Submit"-Button absenden will. Dadurch wird dem Button noch ein zusätzliches class-Element "loading disabled" und das Attribut disabled="disabled" hinzugefügt. Dadurch ist es nach diesem Vorgang nicht mehr möglich das Formular erneut abzusenden (auch wenn die Eingaben korrigiert wurden und alle Felder "valide" sind).


 <input type="submit" value="Kundendaten abschicken" class="submit submit_once loading disabled" disabled="disabled">

Hier noch mein Javascript:

<script type="text/javascript">	  
    		var firstName = new LiveValidation('firstName');  
    		var lastName = new LiveValidation('lastName');  
    		var firm = new LiveValidation('firm');  
    		var ustid = new LiveValidation('ustid');  
    		
    		firstName.add(Validate.Presence);
    		lastName.add(Validate.Presence);
    
    		
    		var selection = document.getElementById('salutation');  
    		selection.onchange = function ()  {    
    			if (this.value == "f")  
    			{
    				var AttDisp1 = document.createAttribute("style");	  
    				var AttDisp2 = document.createAttribute("style");	  
    				AttDisp1.nodeValue = "display: inline";				  
    				AttDisp2.nodeValue = "display: inline";  
    				document.getElementById("firmReg1").setAttributeNode(AttDisp1);  
    				document.getElementById("firmReg2").setAttributeNode(AttDisp2);  
    
    				firm.enable();				
    				ustid.enable();
    
    				firm.add(Validate.Presence);
    				ustid.add(Validate.Presence);	
    				ustid.add(Validate.Length, { is: 12 } );
    			}
    			else if (this.value != "f")  
    			{
    				document.getElementById("firmReg1").removeAttribute("style");  
    				document.getElementById("firmReg2").removeAttribute("style");  
    				
    				firm.disable();				
    				ustid.disable();	
    			}
    		}
    </script>
Wie kann ich erreichen, dass die Attribute wieder von dem "Submit"-Element entfernt werden, sobald wieder alle Felder "LV_valide" sind?

Danke & Gruß
Feder
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 265727

Url: https://administrator.de/contentid/265727

Printed on: April 16, 2024 at 14:04 o'clock

4 Comments
Latest comment
Goto Top
Member: Snowman25
Snowman25 Mar 09, 2015 at 16:42:06 (UTC)
Goto Top
Hallo @chef1568,

schonmal mit den leuten von Livevalidation kontakt aufgenommen? Die wären da die besseren Ansprechpartner.

Gruß,
@Snowman25
Mitglied: 114757
Solution 114757 Mar 09, 2015 updated at 18:39:34 (UTC)
Goto Top
Beispiel
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Live Validation Demo</title>
</head>
<script type="text/javascript" src="http://livevalidation.com/javascripts/src/1.3/livevalidation_standalone.compressed.js"></script>  
<script type="text/javascript">  
function init(){
	var valName	= new LiveValidation('txtName',{  
	onInvalid: function(){document.getElementById('btnSubmit').setAttribute('disabled','disabled');},  
	onValid: function(){document.getElementById('btnSubmit').removeAttribute('disabled');}  
	});
	valName.add(Validate.Presence);
	valName.add(Validate.Format,{pattern: /jodel/i});
}
</script>
<body onLoad="init()">  
<form name="form1" method="get" action="demo_live_validation.html">  
  <p>
    <label for="btnName">Ihren Namen eingeben:</label>  
    <input type="text" name="txtName" id="txtName">  
    <span style="font-size:small">Hier 'jodel' eingeben</span>  
  </p>
  <p>
    <input type="submit" name="btnSubmit" id="btnSubmit" value="Abschicken">  
  </p>
</form>
</body>
</html>
Gruß jodel32
Member: chef1568
chef1568 Mar 09, 2015 at 18:23:12 (UTC)
Goto Top
Hallo jodel32,

mit dieser Option funktioniert das "live" Manipulieren der Attribute des Submit-Buttons.
Nur leider funktioiert die Livevalidierung an sich jetzt nicht mehr.

Gruß feder
Member: chef1568
chef1568 Mar 09, 2015 at 18:39:07 (UTC)
Goto Top
Hallo,

ich konnte das Problem mittlerweile lösen - nicht schön aber funktional.
Hierzu musste ich für jedes Feld 2 eigene Prüfungen erzeugen (Prüfung1: Livevalidierung, Prüfung2: Button manipulation)

...
// Livevalidierung
var firstName = new LiveValidation('firstName');  
var lastName = new LiveValidation('lastName');  

firstName.add(Validate.Presence);
lastName.add(Validate.Presence);

		
// Submit-Manipulation		
var BTNfirstName = new LiveValidation('firstName', {onInvalid: function(){document.getElementById('RegSubmit').setAttribute('disabled','disabled');}, onValid: function(){document.getElementById('RegSubmit').removeAttribute('disabled');}});  
var BTNlastName = new LiveValidation('lastName', {onInvalid: function(){document.getElementById('RegSubmit').setAttribute('disabled','disabled');}, onValid: function(){document.getElementById('RegSubmit').removeAttribute('disabled');}});  
		
BTNfirstName.add(Validate.Presence);
BTNlastName.add(Validate.Presence);
...

Danke nochmal an jodel für den Denkanstoß
GermansolvedQuestionJavaScriptDevelopment